安装下载vue脚手架2和3步骤及区别

安装vue-cli2版本步骤如下：

1.下载vue-cli2

npm i -g vue-cli

2.vue-cli2构建vue项目

// vue-project是项目名，可以自己定义
vue init webpack vue-project
//执行上面命令后出现下面代码，除了test两个测试选择n其他一直回车
Project vue-project                      项目名         --- 回车
? Project description               项目描述       --- 回车
? Author                             作者           --- 回车
? Vue build                         选择第一个      --- 回车   
? Install vue-router?               vue 路由       y  /  --- 回车   
? Use ESLint to lint your code?     代码风格检测     y  --- 回车   
? Set up unit tests No              测试           n    --- 回车      
? Setup e2e tests with Nightwatch?  测试           n    --- 回车   
? Should we run `npm install` for you after the project has been created? (recommended)
  Yes, use NPM                      使用npm 去安装项目依赖
  Yes, use Yarn                     使用 yarn 去安装项目依赖
❯ No, I will handle that myself     使用自己的方式安装 （cnpm）

3.进入项目目录并运行

// 1.vue-project 是文件夹，需要与上面项目名相同
cd vue-project
// 2.npm run dev 或者 npm start
npm start

4.打包并运行

//1.打包
npm run build
//2.运行打包
serve dist

如果你希望npm start之后自动打开页面，可以在config文件夹–>index.js文件里设置autoOpenBrowser:true

安装vue-cli3版本步骤如下：

注意：下载脚手架3之前一定要卸载脚手架2

npm uninstall -g vue-cli
// 你可以查看vue版本，如果没有出现2.x.x（x表示0-9的数字），说明卸载成功，命令如下
vue -V

1.下载vue-cli3

npm i @vue/cli -g

2.vue-cli3构建vue项目

//如果你需要用旧版本（vuecli<3）的vue init功能，可以全局安装一个桥接工具：
npm i -g @vue/cli-init
// vue-project是项目名，可以自己定义
vue create vue-project2

3.进入项目目录并运行

// 1.vue-project2 是文件夹，需要与上面项目名相同
cd vue-project2
// 与脚手架2运行命令不一样
npm run serve

4.打包并运行

//1.打包
npm run build
//2.运行打包
serve dist

如果你希望npm run serve之后自动打开页面，可以在package.json文件里"scripts"对象下的serve属性值后面添加–open 如：“serve”: “vue-cli-service serve --open”,