@vue-cli的安装及vue项目创建
1.安装 Node.js & Vue CLI
@vue/cli3,是vue-进行搭建的脚手架项目,它本质上是一个全局安装的 npm 包,通过安装它,可以为终端提供 vue 命令,进行vue项目的创建及管理运行等。当然使用这一脚手架工具,以及进行vue相关开发之前,均需要安装 Node.js 环境,它实际提供了javascript的服务端运行环境。
(1)安装node.js和npm
打开 Node.js 官网(https://nodejs.org/en/download/),选择长期支持版下载,之后一路 Next 下去即可。目前的 Node.js 安装包已经包含了 npm,即安装node.js后,一般不用再单独安装npm了,npm跟.NET 平台的 Nuget一样,但它主要用于js等客户端软件依赖包的安装。安装完成后在cmd命令行输入node –v和npm –v如果都能正确显示版本号,则表明安装成功了。
环境配置:需要配置npm安装的全局模块所在路径,以及缓存cache的路径,之所以要自行配置,是因为以后在执行类似:npm install express -g (可选参数-g,代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。例如:希望将全局模块所在路径和缓存路径放在node.js安装的文件夹中,则在安装的文件夹“D:\Develop\nodejs”(本文自选了一个D盘的安装地址)下创建两个文件夹node_global及node_cache如下图:
创建完两个空文件夹之后,打开cmd命令窗口,输入类似命令:
npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"
接下来设置环境变量,关闭cmd窗口,我的电脑-右键-属性-高级系统设置-高级-环境变量,进入环境变量对话框,在系统变量下新建NODE_PATH,输入D:\Develop\nodejs\node_global\node_modules,将用户变量下的Path修改为D:\Develop\nodejs\node_global。
最后测试:配置完后,安装个module测试下,我们就安装最常用的express模块,打开cmd窗口,输入如下命令进行模块的全局安装:
npm install express -g # -g是全局安装的意思
补充:通过npm安装模块时都是去国外的镜像下载的,有的时候由于网络原因会导致安装模块失败,好在阿里有团队维护国内镜像:http://npm.taobao.org/ 上面有使用说明。官网:可以使用定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm,cnpm支持 npm 除了 publish 之外的所有命令。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
(2)安装@vue/cli3
Node 环境安装好之后,就可以安装@vue/cli3脚手架工具了,如果之前已经全局安装了旧版本的 vue-cli (1.x 或 2.x),则需要先卸载旧版本的 vue cli。
npm uninstall vue-cli -g ## 卸载 vue-cli (1.x or 2.x)
npm install -g @vue/cli
安装之后,就可以在命令行中使用 vue 命令。
vue ## 查看 vue 相关帮助信息
vue --version ## 查看安装的 vue cli 版本信息
只要能查看到版本信息,则表明已经安装好了。
(3)创建vue项目
利用@vue/cli3,不仅可以使用 vue create 命令来创建项目,而且可以使用图形化的页面创建应用。以下具体操作比较流程化,请自行百度。项目运行命令与之前vue-cli有所区别,@vue/cli3启动项目使用npm run serve。
vue create project-name ## 使用命令行的形式创建
vue ui ## 使用图形化的方式创建
2.@vue/cli3与vue-cli项目结构区别
(1)文件的精简度
@vue/cli3的目录结构图
vue cli 2.x 的目录结构
(2)配置区别
①vuex(状态管理):在vue-cli 2 中,vuex是项目搭建完成后,需要自行npm install的,vue-cli 2的vuex文件夹(store)包含了三个js文件:action(存放一些调用外部API接口异步执行的方法,然后commit mutations改变数据)、index(初始化mutations 数据,是store的出口)、mutations(处理数据逻辑的同步执行的方法的集合,Vuex中store数据改变的唯一方法commit mutations)。@vue/cli 3 中,vuex是包含在项目搭建过程供选择的预设,只用一个store.js代替了原来的store文件夹中的三个js文件。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: { // 初始化状态
count: 0
},
mutations: { // 处理状态
increment(state, payload) {
state.count += payload.step
}
},
actions: { // 提交改变后的状态
increment (context) {
context.commit('increment')
}
}
})
②去掉 static文件夹、新增 public 文件夹,vue-cli 2中,static 是 webpack 默认存放静态资源的文件夹,打包时会直接复制一份到dist文件夹(不会经过 webpack 编译)。@vue/ cli 3,摒弃了static,新增了一个 public文件夹。@vue/ cli 3中“静态资源”有两种处理方式:一是经webpack 处理,在 JavaScript 被导入或在 template/CSS 中通过“相对路径”被引用的资源会被编译并压缩;二是不经webpack 处理,放置在 public 目录下或通过绝对路径被引用的资源将会“直接被拷贝”一份,不做任何编译压缩处理。
③index.html ,@vue/ cli 3中,“public/index.html ”会被 html-webpack-plugin 处理的。
④src/views:@vue/ cli 3的 src目录下,新增了 views文件夹,用来存放 “页面”,与 components(组件)进行区分。
⑥去掉 build(根据config中的配置来定义规则)、config(配置不同环境的参数)文件夹:@vue/ cli 3中,这些配置你可以通过命令行参数、或vue.config.js
(在根目录下自行新建一个 vue.config.js 同名文件)里的devServer字段配置开发服务器。
⑥babel.config.js:配置Babel 。Balbel的作用是将 ECMAScript 2015 及该版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的 javascript 代码,简而言之,就是把不兼容的 JavaScript 代码转为可兼容,可以执行的 JavaScript 代码。vue cli使用了 Babel 7 中的新配置格式babel.config.js
。和.babelrc
或package.json
中的babel
字段不同,这个配置文件不会使用基于文件位置的方案,而是会一致地运用到项目根目录以下的所有文件,包括node_modules
内部的依赖。官方推荐在vue cli项目中始终使用babel.config.js
取代其它方式。
⑦根目录的一些其他文件的改变:之前所有的配置文件都在vue create 搭建时preset预设,或者后期通过命令参数、在vue.config.js 中配置(根据需要在根目录下新建 vue.config.js自行配置 :
https://cli.vuejs.org/zh/config/)。在@vue/ cli 3,webpack的配置已经被脚手架默认了,并不会显示。如果我们需要手动配置webpack的一些配置,可以在根目录下,手动创建配置文件---vue.config.js。