Vue集成项目一般是用vue-cl脚手架来创建，也可以偷懒用别人建好的项目自己拷贝一份。在创建项目时Vue-cli的版本不同创建方式也不同，为以后创建项目时有个参照（毕竟不是经常创建项目），记录此过程。
前期准备
1、系统中必须要安装Node.js，下载地址：
英文网站：https://nodejs.org/en/
中文网站：http://nodejs.cn/download/
可以根据个人需要下载LTS版本或Current版本，网站推荐下载LTS版。Node安装成功后，在系统命令运行：node -v，将返回Node的版本信息，如：v10.13.0
2、安装Vue-cli脚手架
2.1、安装Vue-cli v2(v2.9.6)
运行命令 npm install vue-cli -g，注意-g是全局安装，这样安装后在命令行才能运行Vue对应的命令。它一般安装在nodejs对应的文件夹中（如果没有修改node.js的安装路径，默认为：C:\Program Files\nodejs)，它包括以下命令程序
安装成功后在命令行运行命令：vue -V，注意参数V是大写字母V，返回正常的版本信息说明安装成功，如返回v2.9.6，安装中出现错误，要多试几次。
2.2 安装Vue-vli v3(v3.11.0)
运行命令 npm install @vue/cli -g，注意-g是全局安装，这样安装后在命令行才能运行Vue对应的命令。
安装成功后在命令行运行命令：vue -V，注意参数V是大写字母V，返回正常的版本信息说明安装成功，如返回v3.11.0
运行脚手架生成集成项目代码
1、运行 Vue-cli v2.9.6 脚手架命令生成集成项目代码
npm init <template-name> <project-name>，例：vue init webpack sell。
template-name为项目结构模板，有：webpack、webpack-simple、browserify、browserify-simple、pwa、simple 6类，选项其中一类项目结构就使用它来创建，之后的开发、调度和打包都使用此类对应的架构。
project-name为项目名，名称用英文字母，其中不能出现大写字母。运行过程系统会下载template-name对应的模板，然后依此：
a）、Project name (sell) 项目名称
b）、Project description (A Vue.js project) 项目描述
c）、Author (xxx<xxx.dd.com>) 默认使用git设置的用户名和email
d）、Vue build (Use arrow keys）Vue的打包推荐选择第一项 Runtime + Compiler: recommended for most users
e）、Install Vue-router? (Y/n) 是否安装Vue的路由，这个必须安装
f）、Use ESLint to lint your code? (Y/n) 使用ESLint来约束你的代码结构，如果不熟悉，选择 n；如果熟悉或想学习，选择 y 安装它。友情提示：对于初次学习它的同学，代码的错误数会让你产生放弃学习Vue！！不过熟悉后就好多了，好多公司现在都要求使用它，还是强烈要求熟悉它。
g）、Pick an ESLint preset (Use arrow keys) 选择一种ESLint配置方案，一般默认选择第一个 Standard (https://github.com/standard/standard)
h）、Set up unit tests (Y/n) 设置单元测试，选择 n，如果选择 y 的话，在下一步要求选择测试模板。
i）、Setup e2e tests with Nightwatch? (Y/n) 端到端自动化测试，功能强大，选择 n ，熟悉它的话选择 y
j）、Should we run 'npm install' for you after the project has been creater? (recommended) (Use arrow keys) 是否直接运行 npm install 安装项目依赖，如果确定上面的信息无误，选择第一项；不确定选择最后一项 No，I will handle that myself ；确定后手动运行 npm install 来安装依赖，也可以使用 Yarn 方式来安装。
运行 npm install 或已经安装的 cnpm install 安装项目依赖包，成功后项目结构如下图
用源代码编辑器打开项目，进行项目开发。推荐编辑器 VSCode或WebStore。
项目开发调试：npm run dev，项目打包发布：npm run build
2、运行Vue-cli 3.0 脚手架命令生成集成项目代码
Vue-cli v3.0创建项目命令：vue create [options] <app-name>
例：vue create vue3demo，注意项目名称不要出现大字字母，之后提示选择
？Please pick a preset：(Use arrow keys) 选择配置方案
default (babel, eslint)
Manually select features
第一种只安装babel，eslint，Router和Vuex都没有安装，如果对项目特熟悉会自己配置的话，选择第一项。
第二种手动按需选择要安装的组件。程序界面会提示：
（）Babel
（）TypeScript
（）Progressive Web App(PWA) Support
（）Router
（）Vuex
（）CSS Pre-processors
（）Linter / Formatter
（）Unit Testing
（）E2E Testing
提示按 a 键选择全部，按 i 反选，按 空格 键选择当前项，↑ ↓ 光标键移动选择
选择好合适的项后按 回车键 安装，成功后提示
另外一种使用：vue ui 启动Web管理，在Web管理页面中选择创建新项目并进行配置。
成功创建后的项目目录结构：
├─node_modules
├─public
│ favicon.ico
│ index.html
│
├─src
│ │ App.vue
│ │ main.js
│ │ router.js
│ │ store.js
│ │
│ ├─assets
│ │ logo.png
│ │
│ ├─components
│ │ HelloWorld.vue
│ │
│ └─views
│ About.vue
│ Home.vue
│
│ .browserslistrc
│ .eslintrc.js
│ .gitignore
│ babel.config.js
│ dd.txt
│ package-lock.json
│ package.json
│ postcss.config.js
│ README.md
项目开发调试：```npm run serve```，项目打包发布：npm run build
另：Vue-cli 3.0 也支持Vue-cli 2.0方式 的 Vue init webpack <project-name>方式来创建，创建后的项目和Vue-cli 2.0的项目结构一样。如果提示不存在 Vue init ，需要运行命令安装：npm install -g @vue/cli-init
注意：如果运行 npm install 安装速度太慢，可以考虑安装淘宝的cnpm提高安装速度或修改npm config 的registry为淘宝镜像。安装淘宝cnpm运行命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
设置npm config 的registry：
a）、运行命令：npm config set registry https://registry.npm.taobao.org，成功后可以使用命令：npmm config get registry来验证是否成功。
b）、运行命令：npm config edit，之后会自动用记事本打开.npmrc文件（此文件在c:\users\xxx下，xxx是你登录windows的用户名），编辑或添加 registry=https://registry.npm.taobao.org，保存，也可以用上面的命令npmm config get registry 来验证是否设置成功。
网友评论