Vue-cli3x

TIP

最后更新时间:2019年08月26日

字数:2910

学习资料

安装

准备条件

  • nodejs
  • npm
  • webpack

TIP

Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+,你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本)

安装

# 检查是否缺少环境
npm list -g --depth 0

# 安装vue-cli 3.x
npm install -g @vue/cli

# 查看cli版本
vue -V //vue --version
1
2
3
4
5
6
7
8

TIP

Vue CLI 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了

2.x和3.x共存

如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具

npm install -g @vue/cli-init
1

安装完后 就还可以使用 vue init 命令

vue init webpack my_project
1

创建项目

2.x

vue init webpack test		// 初始化项目 不支持驼峰(含大写字母)
cd test				        // 移动到当前项目跟文件夹
npm install                 // 安装依赖
npm run dev			        // 打开本地测试的生产环境
1
2
3
4

3.x

vue create test		// 初始化项目 不支持驼峰(含大写字母)
cd test				// 移动到当前项目跟文件夹
npm install         // 安装依赖(其实不用,可以略过安装依赖)
npm run serve		// 打开本地测试的生产环境
1
2
3
4

详细创建步骤

  • 会提示你选择一个preset(预设)
    • 有:会显示预设
    • 无:只有另外2项
  • default(babel,eslint):
    • 默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的npm包
  • Manually select features:
    • 手动配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的 npm 包
    • 手动配置,根据你需要用方向键选择
      • 按 “空格键”选择/取消选择
      • A键全选/取消全选
 ( ) Babel                    //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行
 ( ) TypeScript  // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)
                包含并扩展了 JavaScript 的语法,需要被编译输出为
                JavaScript在浏览器运行,目前较少人再用
 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 ( ) Router                     // vue-router(vue路由)
 ( ) Vuex                       // vuex(vue的状态管理模式)
 ( ) CSS Pre-processors         // CSS 预处理器(如:less、sass)
 ( ) Linter / Formatter         // 代码风格检查和格式化(如:ESlint)
 ( ) Unit Testing               // 单元测试(unit tests)
 ( ) E2E Testing                // e2e(end to end) 测试
1
2
3
4
5
6
7
8
9
10
11
  • 是否使用history router

  • css预处理器

  • ESLint:提供一个插件化的javascript代码检测工具

  • 何时检测

  • 单元测试

  • 如何存放配置

  • 是否保存本次配置(之后可以直接使用)

2.x 和3.x 区别

vuex(状态管理)

router (路由)

去掉 static 、 新增 public 文件夹

index.html

src/views

去掉 build(根据config中的配置来定义规则)、config(配置不同环境的参数)文件夹

babel.config.js

根目录的一些其他文件的改变

vue ui

通过vue的图形化界面 安装新的项目

# 运行项目,即可自动打开浏览器,图形化创建项目
vue ui
1
2