vue实战开发003:详解vue-cli 3.0项目搭建

      智能铣削项目终于告于段落了，接着准备承接下一个项目了，为迎合其他部门的开发环境这次我们准备用vue-cli 3.0环境开发，在安装vue之前我们需要安装node环境，这个我们只要在node官方下载node绿色免安装版，然后再配置下环境变量即可使用node和npm了。

 将node所在目录配置到电脑的环境变量中就可以使用了，这里我的目录是D:\Program Files\node-v10.8.0-win-x86，这里我们只要打开电脑-属性-系统设定-进阶-环境变量中奖该路径添加到path中即可， 快捷键“win+r ”打开运行框，输入cmd在弹出的窗口中输入node -v 检查node.js是否安装成功。

这里我们配置淘宝的镜像源，这里设置永久的输入命令：npm config set registry https://registry.npm.taobao.org/

// 临时
npm --registry https://registry.npm.taobao.org install express

// 永久
npm config set registry https://registry.npm.taobao.org

// 验证是否成功
npm config get registry

 

     现在我们可以开始来搭建vue-cli 3.0环境了，输入命令：npm install -g @vue/cli 安装vue3.0（-g： 指全局安装）,快捷键“win+r ”打开运行框，输入cmd在弹出的窗口中输入vue -V（大写的V哦）来 检查vue是否安装成功。

npm install -g @vue/cli

     接下来我们继续创建vue项目 ，vue3.0和2.0有点区别，不用在装webpack了，直接使用命令：vue create project创建项目（project为项目名），进入项目配置，这里选择Manually select features（翻译：手动选择功能）。

    进入下一个安装配置选择，这里根据项目情况自行选择配置，按上下键切换目标选项，按空格键勾选和取消，按a全选，按i反选，选好后回车确定（以下是几个选项的相关意义），图中是我的选择。

Babel：指转译成浏览器可识别的语言，可以让你的项目支持更新的语法，如es6\es7等
TypeScript：新增的选项卡
Progressive Web App (PWA) Support：指模拟原生app
Router：路由管理
Vuex：vuex管理模式
CSS Pre-processors：css预处理语言
Linter / Formatter：代码规范
Unit Testing：组件单元测试
E2E Testing：端对端测试，模拟用户真实场景

 

    接下来提示我们选择是否使用历史路由：这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面,我们输入Y同意即可，然后就是选择CSS预处理器语言，在弹出的选项中我选择LESS

 选择ESLint的代码规范，此处使用 Standard代码规范，这里我选择了ESLint + Standard config（正常模式）

ESLint with error prevention only: 只进行报错提醒；
ESLint + Airbnb conf: 不严谨模式；
ESLint + Standard config: 正常模式；
ESLint + Prettier: 严格模式；

 接着选择代码检查方式，这里提示我们何时对进行代码检测，我选择在保存时进行检测，Lint and fix on commit（requires Git）【翻译：整理并固定提交时（需要git）】

接着选择单元测试解决方案，这里选择 我Jest

 接着选择 Babel、PostCSS、ESLint等配置文件存放位置，第一个保存配置文件中，第二个放package.json里，这里我选择单独保存在各自的配置文件中。

接着提示是否在以后的项目中使用以上配置，这里我们选择no，下次自行配置，你也可以选择yes。

     完成以上信息配置之后开始创建项目并开始下载依赖，我们只要耐心等待进度条完成，这样我们就把Vue项目创建好并完成了初始化。

百度经验 ： vue实战开发003:详解vue-cli 3.0项目搭建