使用Vue-CLI构建项目(详细）

构建需要用到npm和Nodejs,安装过程参照npm安装配置和Node安装配置

1. 安装cnpm: 打开CMD,输入： npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 然后输入cnpm -v 若打印出版本号，则安装成功。

• 在项目所要放置的文件目录下打开CMD
• 输入 vue init webpack myproject2 初始化项目（ps: myproject2是项目名称）

模板下载完成后，Vue CLI引导我们进行项目配置

 

 是的话回车就行。

在这里使用上下箭头可以选择，这里我是选第一个，然后回车。 

 

 

 回车，完成。

 

 

Pick an ESLint preset     NO

Set up unit test    NO

Setup e2e tests with Nightwatch    NO

Should we run `npm install` for you after the project has been created?    NO

 

进入项目文件夹，安装项目依赖，输入cnpm install

 

 输入npm start 启动webpack-dev-server

 打开浏览器,输入http://localhost:8081

然后， 在文件夹下查看myproject2

 另开一个控制台，也是在myproject2文件夹目录下，输入npm run build构建项目的生产版本

 再次查看文件夹下myproject2,发现多了一个dist文件夹

 这样，使用Vue-CLI构建项目就完成了。

Vue CLI 项目初始目录

名称	说明
build	开发和生产版本的构建脚本
config	开发和生产版本的部分构建配置
dist	由npm run build生成；项目的生产版本；项目完成后，交付该文件夹即可
src	项目开发的关键资源目录和主要的工作区间
static	静态资源（如使用JS赋值图片的src时，该图片的资源放在static目录下
.babelrc	babel的配置文件（babel,下一代JS的预编译器）
.eslintigore	ESLint代码语法检测的配置文件（应忽略的语法格式）
.eslintrc.js	ESLint代码语法检测的配置文件（应规范的语法格式）
.gitignore	应被Git版本控制工具忽略的文件
index.html	应被webpack注入资源的模板html文件