Vue 学习笔记 (二) -- 使用 VueCli 3

前面的文章已经简单介绍过了 Vue Cli 3 的新版本特性，下面我们就亲自上手感受一下我们新版本的脚手架工具。

先从项目搭建开始。

创建项目

打开我们的命令行工具，输入下面的命令创建项目。

vue create hello-world

身为一名程序员，当然要从 hello-world 开始写喽。

此处要注意 官方文档 上面这样说：

如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。

当然如果你的命令并没有出错的话完全可以忽略这点。

创建项目命令选项

言归正传，输入上面的命令回车后应该是下面这样子的：

Vue CLI v3.0.1
? Please pick a preset: (Use arrow keys)
❯ default-project (vue-router, sass, babel) 
  default (babel, eslint) 
  Manually select features 

上面的第一条，也就是 default-project 这一个选项在你第一次创建项目的时候是并不会出现的，只有你第一次创建完成项目后回提示你保存为默认配置模板，下次新建项目的时候就可以使用你选用的配置快速新建项目了，不需要再重新选择配置项目了。

废话有点多，我们继续介绍这里显示的选项。

这里的第二条选项便是 vue cli 3 默认的项目模板，包含 babel 和 eslint。

第三条选项便是自主选择你项目所需的配置。

这里由于默认模板没有啥展示的必要所以我们便选择手动配置。

选取项目配置

选择第三个选项后是这个样子的：

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

这里我们可以选择我们需要的配置选项，选择完成后回车进入下一步。

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) 

上面我选择添加了 Router 所以这里会问我需不需要使用 history 模式，选择是然后进行下一步，在这里需要注意的是当最后一步的时候会提示你要不要保存该配置为模板，选择是后自定义一个名字，以后就可以使用这一套配置为默认模板快速创建项目了，就是我前面的第一条默认配置选项。

如下：

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): SCSS/SASS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N) 

然后进入项目目录，启动项目就可以了。浏览器访问 hello-world，至此大功告成。

后面文章会讲解如何修改 Vue Cli 3 项目基础配置。

更多文章可查看 我的博客