Vue cli2与cli3 脚手架

1. 先检查我们的node版本，要在v8版本以上

node -v

 

2. 使用yarn，npm两种方式安装Vue-cli

yarn global add vue-cli

nmp install global vue-cli

安装完后可以输入以下检测是否安装成功(大V！！)，出现版本号就代表成功

vue -V

 

3. 使用vue-cli创建项目(如果是在项目里面创建的话就用.代替项目名，否则是vue-demo)

cli2版本

vue init webpack .

cli3版本

vue create .

 

4. 接下来是进行一系列相关的配置

cli2版本

? Project name vue-demo # 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称
? Vue build standalone # 我选择的运行加编译时
    Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router，路由肯定要的
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我选的NPM

cli3版本

 

5. 对项目进行初始化

yarn

npm install

 

6. 启动项目

yarn run dev

npm run  dev 

 

7. 开发和生产环境不同，在package.json里面有相关运行代码，只需将启动项目的dev换成你要的环境

{
  "name": "vue-test",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  //开发
    "start": "npm run dev", //初始化的是这个
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"  //生产
  },
}