正确姿式使用vue cli3建立项目

时间 2019-11-06

标签正确使用 vue cli3 cli 建立项目繁體版

原文原文链接

前言

在19年8月份的时候，vue-cli更新到了3.X，新版本的脚手架封装度更高，配置起来简单许多，旨在让用户把精力都放在编写业务代码中，本人从vue-cli2.X过渡到3.X挺适应的，毕竟3.X脚手架已经自动搭建在webpack4上，因此不用你们再去从webpack3升级到webpack4,固然性能也提升了不少，因此推荐你们使用cli3.X版本去搭建本身的项目，经过这篇教程帮你们熟悉使用vue cli3去搭建vue项目。css

基于vue cli3开发的后台管理系统，项目地址 vue-admin-webapp 欢迎star，forkhtml

安装

卸载旧版本：

若是你以前都是基于vue-cli2.X,你须要先卸载它：vue

#卸载vue-cli
npm uninstall -g vue-cli 
复制代码

Vue CLI 须要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。node

安装vue-cli：

npm install -g @vue/cli  // 安装cli3.x
vue --version 或者 vue -V  //查看版本是否为3.x
复制代码

Vue CLI >= 3 和旧版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆盖了。若是你仍是想继续使用2.x搭建项目，你能够全局安装一个桥接工具：webpack

npm install -g @vue/cli-init
# 而后你就能够继续使用vue init了
npm init webpack my-project
复制代码

快速原型开发

你可使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这须要先额外安装一个全局的扩展：git

npm install -g @vue/cli-service-global
复制代码

安装完成以后，就新建一个文件夹，并建立一个.vue文件，执行下面命令就跑起来了es6

vue serve app.vue  // 启动服务
vue build app.vue  //打包出生产环境的包
复制代码

以下图，只要建立一个app.vue文件并执行 vue serve app.vue 就启动服务了github

这是一个很棒的功能，用于开发一个库、组件，作一些小demo等都是很是适合的！web

建立项目

初始化：

# 建立项目
vue create my-project // 其中my-project为项目目录名称
复制代码

点击回车后，就不断有拦路记者访问你vue-cli

此处有两个选择：

default (babel, eslint) 默认配置提供babel和eslint支持
Manually select features 本身手动去选择须要的配置

能够同过上下键，空格来选择，通常会选择手动的配置以下：

对于每一项的功能，作一下简单阐述：

Babel 主要是对es6语法转换成兼容的js （选上）
TypeScript 支持使用TypeScript语法来编写代码
PWA PWA 支持
Router 支持vue路由配置插件（通常都会选择）
Vuex 支持vue程序状态管理模式 (通常都会选择)
CSS Pre-processors 支持css预处理器（通常都会选择）
Linter / Formatter 支持代码风格检查和格式化（选上）
Unit Testing 单元测试
E2E Testing E2E测试

那么基于开发常见的项目，通常选择以下：

选择完成后回车：

这的意思是问你本次项目是否采用history模式，若是选择Y,须要后台配置具体看vueRouter官网解释，这里我门选择 n

选择完成后回车：

这里是问你选择一种css预处理，我项目通常使用SCSS，因此这块我选择第一个，回车后：

这里是问你选择一种格式化代码方式，我用VSCode，因此通常选择 ESlint + Prettier,选择回车：

这里问你何时进行代码规则检测，通常会选择保存就检测，也就是Lint on save 选择回车：

这问将Babel,PostCSS,ESLint这些配置文件放哪，一般咱们会选择放到独立位置，让package.json文件干净点，因此选择第一个 点击回车：

这里是问你是否记录此次配置选择，选择以后会让你为此次配置起一个名字，这样下次能够直接快速配置选择，最后回车后就会初始化项目了，完成后以下图：

根据提示，咱们执行指令 cd my-project 而后执行命令npm run serve 这样就开始启动项目了

这是打开 http://localhost:8080 ：

当咱们须要自定义webpack相关配置的时候须要在项目根目录中建立vue.config.js文件，它会被@vue/cli-server自动加载，相关配置内容官网将的很详细，能够点击查看

当咱们须要调整webpac k配置的时候，能够经过chainWebpack属性进行链式操做，这里有个技巧就是经过 vue inspect --mode production product.js 或vue inspect > development.js 来导处生产和开发环境的配置文件，文件里面包含了链式访问的规则，这样咱们就能够经过链式操做来修改添加webpack配置。

好了整个初始化项目已经完成，接下来就是编写代码了，有关vue cli3还有个新功能就是使用图形化界面建立/管理/运行项目，这里我就不说，你们能够去官网看看具体教程吧。