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" //生产 }, }