Vue-cli3.0实战探究

随着时间的推进，我们迎来了vue-cli3.0的面世，越来越图像化和傻瓜式，方便了前端开发的入门。

此文仅以MacOS为例：

• vue-cli的安装

npm install -g @vue/cli

# OR

yarn global add @vue/cli

您可以*.vue使用vue serve和vue build命令只使用一个文件快速进行原型设计，但是它们需要先安装一个额外的全局插件：

npm install -g @vue/cli-service-global

不过在国内环境推荐用cnpm 或者yarn 安装：

cnpm install -g @vue/cli-service-global

yarn add @vue/cli-service-global

• 创建项目

您可以选择基本Babel + ESLint设置附带的默认预设，也可以选择“手动选择功能”以选择所需的功能

vue create hello-world

可以使用上下方向键来切换选项。如果只需要 babel 和 eslint 支持，那么选择第一项，就完事了，静静等待 vue 初始化项目

vue-cli 内置支持了8个功能特性，可以多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。

• TypeScript 支持使用 TypeScript 书写源码。
• Progressive Web App (PWA) Support PWA 支持。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 预处理器。
• Linter / Formatter 支持代码风格检查和格式化。
• Unit Testing 支持单元测试。
• E2E Testing 支持 E2E 测试。

选择默认：

$ cd hello-world

$ yarn serve

 

• 用UI界面创建项目

vue ui

等待创建成功

相比可视化界面来说，没有命令行那么直接和快速，强烈推荐用命令行安装