精华内容
下载资源
问答
  • 早前脚手架这个词是从 vue-cli 这里认识的,我们通过 npm install -g vue-cli 命令全局安装脚手架后, 再执行 vue init webpack project-name 就能初始化好一个自己的项目,真是尼玛的神奇:hushed:。但你有没有想过为...
  • 主要介绍了vue-cli3.0 脚手架搭建项目的过程,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue脚手架搭建流程

    万次阅读 多人点赞 2018-01-07 15:49:22
    搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧。(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的。。。。。。) 1&安装node....

    搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧。(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的。。。。。。)

    1& 安装node.js (安装网址点击下面链接)

    node.js下载网址

    安装完以后桌面上什么都没有是不是有点慌啊!不急,你先打开Dos窗口,输入以下命令,

    如果界面如下:(恭喜你)

    也有可能失败,失败的原因可能是系统权限,目前还没有找到最好的解决办法。。。。。

    Node.js是个啥人家首页都写着呢,俺就不给你解释了哈。

     

    2&安装vue的脚手架

    全局安装vue-cil,也就是所谓的脚手架(不要觉得有什么高大尚的也就是如此而已)

    1)用npm安装(国际开源库生态系统)

    2)用cnpm安装(使用国内镜像安装)

    你先用淘宝镜像安装cnpm才可以使用哦

    1.npm install -g cnpm --registry=https://registry.npm.taobao.org

    检查是否安装上(cnpm -v)

    2. 用cnpm安装vue脚手架

    cnpm install -g vue-cli

    最后检查自己是否安装上:(vue -V)记住这里的-V是大写字母V,出不来可不要懒我,我可不会管你

    特别注意:

    1.如果提示“无法识别”,有可能是npm的版本过低。

    解决办法:npm install -g npm(更新一下版本就好了)。

    2. 如果安装失败的话。

    解决办法:npm cache clean(清除一下缓存就好了)

     

    3&生成项目

    首先需要用cd指令进入项目目录进行搭建项目的文件夹

     

    配置完成以后,可以看到目录下多出一个项目文件夹,里面就是vue-cli创建的一个局域webpack的vue.js项目。

    然后进入项目目录下:cd mai

    上面脚手架给我们把常用的插件都下载并且配置起来,比方说路由、以及es6转成es5的插件。

    在做项目的过程我们常常用到数据的传输和各个组件的管理,所以接下来我们还需要安装一些插件:

     

    安装vue-resource是用于ajax请求的vue插件 用来和服务器端进行数据通信

    npm install vue-resource --save

    安装vuex是用于管理每个组件之间的状态值的改变

    npm install vuex --save

    点击打开链接(vuex的介绍和使用)

    记住以上两个必须安装在项目里哦,忘记了小姐姐可不会负责哦(没事,错了就重新来一遍呗)。

    npm install(这样就完成了)

    最后就是启动项目了(就问一句激不激动小伙伴们)

    npm run dev

    出现这个页面就算是大功告成了(在浏览器上输入localhost:8080就可以打开如下界面)

    (可以开始写项目了。。。。。。)

    特别注意:

    如果浏览页面打不开或者是没有加载页面,有可能是本地8080端口被占用,又或者是你关闭了这个窗口。

    解决办法:

    针对第一种情况:修改配置文件就好了

    打开项目找到config>index.js

    建议将端口号改为不常用的端口(例如:8075 8081等等端口,一般情况默认的端口号是8080)。

    对于第二种情况:重启一下JavaScript的运行环境就好了,至于怎么启动我就不说了。

     

    4&打包上线

    自己的项目文件都需要放到 src 文件夹下

    项目开发完成之后,可以输入 npm run build 来进行打包工作

    打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看,项目上线时,只需要将 dist 文件夹放到服务器就行了。

    导入文件以后,其文件组织结构如下所示:

    各个文件夹的含义如下:

     

    |-- build            // 项目构建(webpack)相关代码

    |   |-- build.js         // 生产环境构建代码

    |   |-- check-version.js      // 检查node、npm等版本

    |   |-- dev-client.js        // 热重载相关

    |   |-- dev-server.js         // 构建本地服务器

    |   |-- utils.js             // 构建工具相关

    |   |-- webpack.base.conf.js     // webpack基础配置

    |   |-- webpack.dev.conf.js      // webpack开发环境配置

    |   |-- webpack.prod.conf.js     // webpack生产环境配置

    |-- config           // 项目开发环境配置

    |   |-- dev.env.js    // 开发环境变量

    |   |-- index.js     // 项目一些配置变量

    |   |-- prod.env.js   // 生产环境变量

    |   |-- test.env.js   // 测试环境变量

    |-- src           // 源码目录

    |   |-- components    // vue公共组件

    |   |-- store        // vuex的状态管理

    |   |-- App.vue       // 页面入口文件

    |   |-- main.js       // 程序入口文件,加载各种公共组件

    |-- static            // 静态文件,比如一些图片,json数据等

    |   |-- data        // 群聊分析得到的数据用于数据可视化

    |-- .babelrc           // ES6语法编译配置

    |-- .editorconfig      // 定义代码格式

    |-- .gitignore        // git上传需要忽略的文件格式

    |-- README.md       // 项目说明

    |-- favicon.ico

    |-- index.html      // 入口页面

    |-- package.json    // 项目基本信息

     

     

    最后来一个撩人小技能(得跟有好感的男盆友玩才有意思):

    女:我们两个有几条腿?

    男:4条腿

    女:不对不对

    男:??

    女:一条腿,他们都说我们有一腿

    (如果你的男盆友不安套路出牌的话我也没有办法了)

    展开全文
  • vue如何搭建脚手架,超详细

    千次阅读 2021-04-12 17:35:43
    如何搭建vue脚手架 提示:以下是本篇文章正文内容,下面案例可供参考 一、安装node win+r输入cmd打开控制台窗口,输入:node -v检查是否安装node。 如果没有安装先去官网安装,安装地址:https://nodejs.org/en/ ...


    前言

    如何搭建vue脚手架


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、安装node

    win+r输入cmd打开控制台窗口,输入:node -v检查是否安装node。
    在这里插入图片描述
    如果没有安装先去官网安装,安装地址:https://nodejs.org/en/

    二、安装cnpm

    (非必要),但是国内的话安装了会快很多。
    输入命令安装:npm install -g cnpm -registry=https://registry.npm.taobao.org
    检测是否安装:cnpm -v
    在这里插入图片描述

    三、安装webpack

    输入webpack -v,检测是否安装。如果没有输入指令:cnpm install webpack -g 进行安装。
    在这里插入图片描述

    四、安装vue-cli

    输入vue -V检测是否安装,如果没有安装输入命令:cnpm install -g vue-cli 安装最新版本。


    如果已经安装了不想要的版本:输入:cnpm uninstall -g @vue/cli 命令进行卸载。


    然后输入命令:npm install -g @vue/cli@3.11.0 下载指定的版本。
    在这里插入图片描述

    五、创建项目

    如果都安装好了,而且检测的时候没有问题,就可以创建项目了。
    1、首先cd到自己想要存放项目的目录。
    2、输入命令:vue init webpack myproject 创建项目(myproject是项目名)。
    3、输入项目描述后回车在这里插入图片描述

    4、输入作者后回车:
    在这里插入图片描述
    5、选第一个回车。
    在这里插入图片描述
    6、是否使用路由。输入y回车
    在这里插入图片描述
    7、输入n回车
    在这里插入图片描述
    8.使用npm就好,如果安装了yarn就用yarn
    在这里插入图片描述
    最后项目就完成了,输入:npm run dev 运行。
    在这里插入图片描述

    总结

    这里是用webpack的方法搭建的。通常如果出现问题,先去上文检测一下安装的东西都安装好了没,再或者就是版本哪里有问题了。

    展开全文
  • 突然热血来潮,实操了一把vue脚手架搭建全新vue项目,现将详细步骤贴出 一.node环境安装。 用vue-cli构建的项目是以node.js为基础的,可以理解为node.js是vue项目再构建时需要用到的环境。无论是本地serve还是打包...

    突然热血来潮,实操了一把vue脚手架搭建全新vue项目,现将详细步骤贴出(审核不通过也是醉了),富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善

    一.node环境安装。
    用vue-cli构建的项目是以node.js为基础的,可以理解为node.js是vue项目再构建时需要用到的环境。无论是本地serve还是打包编译都与其有密切关系,总体说node.js为前端工程化提供了必要条件。之前看到过vue.js、webpack实现、node.js三者的关系:vue.js工程化=>webpack实现=>node.js(webpack基础)

    1.下载地址:https://nodejs.org/en/
    2.检查node环境安装是否成功:npm包管理器是集成在node中的,所以直接输入npm -v 就能查看到版本信息,node同样如此
    在这里插入图片描述
    温馨提示:node的版本尽量高点,个人建议v8.9或者v10.0.0版本亲测好用,否则会出现不兼容情况很麻烦滴···
    3.使用node安装依赖时访问的是~~~(发布不出去,哭唧唧:富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善),或者由于网速原因导致下载失败,小编使用的是dl(富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善)访问下载,当然也可以使用淘宝镜像代理http://npm.taobao.org/,输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

    ···接下来就是重头戏了···

    二.搭建vue项目环境

    1.全局安装vue-cli (输入:npm install --global vue-cli)
    在这里插入图片描述
    2.接下来就是进入你的项目目录中,创建一个基于webpack模板的新项目:vue init webpack+项目名

    .我的项目放在了E盘下的Demo文件夹中,进入步骤都会8,我也贴出来:dir可以看到你该盘下的所有文件
    

    在这里插入图片描述
    ok,进入到项目目录中后,执行vue init webpack+项目名命令:
    在这里插入图片描述
    解释说明:
    Vue build: 打包方式,回车即可;

    Project name:项目名称;

    Project description:项目描述;

    Author:作者;

    Install vue-router : 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;

    Use ESLint to lint your code : 是否需要 js 语法检测 目前我们不需要 所以 n 回车;

    Set up unit tests : 是否安装 单元测试工具 目前我们不需要 所以 n 回车;

    Setup e2e tests with Nightwatch : 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
        
    3.根据提示操作即可:进入项目–cd vue-demo,启动项目–npm run dev
    在这里插入图片描述
    4.我们的目录文件,至此就创建成功
    在这里插入图片描述
    5.启动成功效果图
    在这里插入图片描述

    三.vue项目目录讲解
    我们的vue项目文件目录如上图所示,对主要部分解释说明。

    ├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
    │   └── build.js                # 生产环境构建脚本
    |   └── check-versions.js  		# 检查npm、node.js
    |   └── utils.js 				# 构建相关工具方法
    |	└── vue-loader.conf.js		# 配置了css加载器以及编译css之后自动添加前缀
    |   └── webpack.base.conf.js	# webpack的基本配置
    |	└── webpack.dev.conf.js		# webpack开发环境配置
    | 	└── webpack.prod.conf.js 	# webpack生产环境配置
    ├── config/                     
    │   ├── index.js                # 项目核心配置(项目配置文件)
    │   └── dev.env.js				# 开发环境变量
    | 	└── prod.env.js				# 生产环境变量
    ├ ── node_module/               #项目中安装的依赖模块(加载的项目依赖模块)
       ── src/						# 这里是我们的主要开发目录,基本上要做的事情都在这个模块里边,主要包含了目录文件
    │   ├── main.js                 # 程序入口文件(入口js文件)
    │   ├── App.vue                 # 程序入口vue组件,是根组件
    │   ├── router					# 前端路由,我们需要配置的路由路径写在index.js文件里
    │   ├── components/             # 组件目录,我们写的组件就放在这个目录里(可封装我们的公共组件)
    │   │   └── ...
    │   └── assets/                 # 资源文件夹,放置一些图片或者公共js、公共css。这里的资源会被webpack构建
    │       └── ...
    ├── static/                     # 纯静态资源 ,如图片、字体等(直接拷贝到dist/static/里面)。不会被webpack构建
    ├── test/
    │   └── unit/                   # 单元测试
    │   │   ├── specs/              # 测试规范
    │   │   ├── index.js            # 测试入口文件
    │   │   └── karma.conf.js       # 测试运行配置文件
    │   └── e2e/                    # 端到端测试
    │   │   ├── specs/              # 测试规范
    │   │   ├── custom-assertions/  # 端到端测试自定义断言
    │   │   ├── runner.js           # 运行测试的脚本
    │   │   └── nightwatch.conf.js  # 运行测试的配置文件
    ├── .babelrc                    # babel 配置文件
    ├── .editorconfig               # 编辑配置文件
    ├── .gitignore                  # 用来过滤一些版本控制的文件,比如node_modules文件夹 
    ├── index.html                  # 入口模板文件(首页入口文件,可以添加一些meta信息等)
    └── package.json                # 项目文件,记载着一些命令和依赖还有简要的项目描述信息(npm包配置文件,定义一些项目npm脚本、依赖包等信息) 
    └── README.md                   #介绍自己这个项目的,可参照github上star多的项目。
    
    

    可以开始我们的vue项目啦—自由发挥,小编的vue项目将会在后面贴出来···,可以稍稍关注哦!

    展开全文
  • vue3.0脚手架搭建

    千次阅读 2020-06-30 10:43:54
    1、安装vue-cli 3.0 先卸载旧版本 npm uninstall vue-cli -g 再安装Vue CLI 3 npm install -g @vue/cli 安装成功查看版本 vue-V 2、创建项目 去指定目录下创建项目 vue create project-name(自己定义项目名,...

    1、安装vue-cli 3.0

    先卸载旧版本

    npm uninstall vue-cli -g

    再安装Vue CLI 3

    npm install -g @vue/cli

    安装成功查看版本 vue-V

    在这里插入图片描述

    2、创建项目

    去指定目录下创建项目

    vue create project-name(自己定义项目名,不可使用驼峰式命名)

    3、选择配置(自定义配置)

    4、在css预编译我选择了less

    在这里插入图片描述

    5、在语法检测工具选择了 ESLint + Standard config

    在这里插入图片描述

    6、在选择语法检测方式中,这里我选择了保存就检测

    在这里插入图片描述

    7、将babel,Eslint 文件存放在哪里

    在这里插入图片描述

    8、是否记录一下以便下次继续使用这套配置

    在此 我键入y,保存名字为 zm-project,等待下次创建项目时可以直接使用这套配置
    在这里插入图片描述

    9、回车后等待下载依赖模块

    10、进入项目目录 运行项目

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 使用vue ui搭建VUE搭建脚手架,不仅便于下载管理插件依赖,还能利用他的可视化对VUE项目做优化,下面是搭建步骤: 1直接Win+R输入vue ui 进入到ui界面。 2创建一个项目:2是项目所在的文件名 2进入到项目详细...
  • Vue.js是前端的主流框架之一,Angular.js、React.js 一起,并成为前端三大主流框架!Vue.js是一款流行的JavaScript前端框架,一个用于创建用户界面的开源JavaScript框架,旨在更好地组织与简化Web开发。Vue所关注...
  • 使用vue脚手架搭建项目详解

    千次阅读 多人点赞 2020-02-24 09:44:12
    安装vue脚手架 这里的版本是vue cli4 cnpm i @vue/cli -g 启动vue脚手架图形化界面 打开命令行,输入以下命令 vue ui 通过vue脚手架图形化界面创建项目 选择项目目录 ...
  • 基于vue2和vue-cli搭建的一款vue多页面应用脚手架,可自动生成webpack配置、模板html、入口js文件以及根组件,集成移动端适配
  • 从0搭建vue-cli4脚手架

    2020-10-15 05:15:45
    主要介绍了从0搭建vue-cli4脚手架,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 本篇文章主要介绍了使用vue-cli(vue脚手架)快速搭建项目的方法,vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,感兴趣的小伙伴们可以参考一下
  • 微信订阅号:Rabbit_svipVue-cli 主要作用是方便开发。Vue-cli 听起来像强大的多功能构建工具,但实际上vue-cli只有...2、在全局安装vue-cli微信订阅号:Rabbit_svipLinux Macsudo npm install -g vue-cliWindow...
  • Vue笔记——搭建脚手架并快速创建Vue项目

    万次阅读 多人点赞 2018-10-01 16:29:37
    现在的Vue脚手架已经升级到3.x版本,即vue-cli3。 脚手架升级之后,安装的命令发生了变化,所以这篇文章会跟大家演示新旧版本的脚手架安装过程。 下面的安装过程均是在window平台下安装。 一、准备工作 1. 安装node...
  • Vue环境搭建和脚手架的使用 安装环境 需要 Node.js 8.9+ (推荐 8.11.0+) 一、安装nodejs 1.1、下载 英文地址:https://nodejs.org/en/download/ 中文地址:http://nodejs.cn/download/ 、 1.2、安装 安装 直接双击...
  • 使用Vue + ElementUI搭建基本的脚手架使用Vue + ElementUI搭建基本的脚手架一、脚手架的构建工具二、安装@vue/cli三、使用vue create命令创建项目四、启动项目五、项目结构介绍 使用Vue + ElementUI搭建基本的脚手架...
  • 安装vue3.0脚手架 如果之前安装了2.0的脚手架,要先卸载掉,输入:npm uninstall vue-cli -g 进行全局卸载 然后重新安装: npm install @vue/cli -g 二,项目搭建过程 由于 git bash 来执行命令的时候无法使用键盘...
  • 主要介绍了详解如何使用vue-cli脚手架搭建Vue.js项目 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 搭建Vue-Cli脚手架(超详细)

    千次阅读 多人点赞 2020-12-14 21:26:28
    搭建Vue-Cli脚手架安装npm安装cnpm全局安装 vue-cli创建vue-cli工程 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。 下面我将从零介绍 vue-cli 的整个搭建过程。 注意:以下内容...
  • 配置环境 ...填写project name选择保存的工作空间>Finish 安装脚手架 1、打开terminal 2、输入命令行 npm i -g @vue-cli 3、测试是否安装成功(注意这里要用大写的V) vue -V 4、脚..
  • vue-cli3.0 脚手架搭建项目 1.安装vue-cli3.0 首先查看一下我们的vue版本 需要先卸载掉旧版本 npm uninstall vue-cli -g npm uninstall vue-cli -g 安装3.0脚手架 npm install -g @vue/cli # or yarn global add @...
  • vue-cli3脚手架搭建

    2021-11-18 23:11:16
    vue-cli3脚手架搭建(npm方法) 1,环境准备 首先我们上node.js官网(https://nodejs.org/zh-cn/),下载最新的长期版本,直接运行安装 执行npm -vnode -v命令查看版本 安装淘宝npm npm install -g cnpm --registry...
  • 今天小编就为大家分享一篇vue-cli脚手架搭建的项目去除eslint验证的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 脚手架功能 vant3.0移动端组件UI库 axios网络数据交互 vuex状态管理 vue-router路由管理 postcss-px-to-viewport移动端px转vw/vh less预编译 autoprefixer自动补全 typescript语法 window.$cancelRequest()取消...
  • 不使用脚手架搭建vue项目 找到一个需要搭建项目的空文件夹 在文件夹中执行命令npm init 生成package.json文件(此处将展示我们的依赖\编译配置等信息) 安装webpack 一vue及vue-loader使webpack能够加载vue文件,并...
  • Vue3.0项目搭建指南前言一、先让Vue3能够运行1.初始化2.安装相关依赖3.编写项目文件配置webpack 前言 本指南作用于帮助开发人员更清晰的了解Vue3.0的常用框架及其生态之间的关系,以及在不借助cli脚手架的情况下...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,414
精华内容 7,765
关键字:

vue搭建和vue脚手架搭建区别

vue 订阅