学习课程：前端工程师2022版-vue基础入门

lesson41：VueCLI 的使用和单文件组件

3-2 VueCLI 的使用和单文件组件（1）-慕课网体系课 (imooc.com)

3-3 VueCLI 的使用和单文件组件（2）-慕课网体系课 (imooc.com)

lesson42：使用单文件组件编写 TodoList

3-4 使用单文件组件编写 TodoList-慕课网体系课 (imooc.com)

lesson43：Vue-Router 路由的理解和使用

3-5 Vue-Router 路由的理解和使用（1）-慕课网体系课 (imooc.com)

3-6 Vue-Router 路由的理解和使用（2）-慕课网体系课 (imooc.com)

讲师：Dell老师

今天继续昨天的课程安排，学习了VueCLI 的使用和单文件组件、使用单文件组件编写 TodoList以及Vue-Router 路由的理解和使用。

vue-cli 是由 Vue 提供的一个官方 cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成 vue.js+webpack 的项目模板。

安装 Cli 有两种方式

// npm 安装

npm install -g @vue/cli  

// yarn 安装

yarn global add @vue/cli

vue -V

// 正确显示版本号

初始化项目

vue create vue-learn回车之后会出现以下画面

Vue CLI v3.9.3

┌────────────────────────────┐

│  Update available: 3.10.0  │

└────────────────────────────┘

? Please pick a preset: (Use arrow keys)

❯ default (babel, eslint) 

  Manually select features 

• default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。

• Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。

• 使用上下方向键来选择需要的选项。

• 使用 manually 来创建项目，选中之后会出现以下画面。

Vue CLI v3.9.3

┌────────────────────────────┐

│  Update available: 3.10.0  │

└────────────────────────────┘

? 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

依然是上下键选择，空格键选中。
对于每一项的功能，此处做个简单描述：

• TypeScript 支持使用 TypeScript 书写源码。

• Progressive Web App (PWA) Support PWA 支持。

• Router 支持 vue-router 。

• Vuex 支持 vuex 。

• CSS Pre-processors 支持 CSS 预处理器。

• Linter / Formatter 支持代码风格检查和格式化。

• Unit Testing 支持单元测试。

• E2E Testing 支持 E2E 测试。

回车之后让选择 CSS 处理器，这里选择 Less。

? 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): (Use arrow keys)

❯ Sass/SCSS (with dart-sass) 

 Sass/SCSS (with node-sass) 

 Less 

 Stylus 

接下来选择 eslink，我选择了 eslink+prettier：

? Pick a linter / formatter config: 

 ESLint with error prevention only 

 ESLint + Airbnb config 

 ESLint + Standard config 

❯ ESLint + Prettier

选择代码检查方式，第一个是保存的时候就检查，第二个是提交上传代码的时候才检查。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i

> to invert selection)

❯◉ Lint on save

 ◯ Lint and fix on commit

选择单元测试，这个我不懂，随便先选个 jest：

? Pick a unit testing solution: 

  Mocha + Chai 

❯ Jest 

配置文件存放的地方，选择 package.json：

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 

  In dedicated config files 

❯ In package.json 

是否保存这次配置，方便下次直接使用，一般都是选择 Y。

? Save this as a preset for future projects? (y/N) 

配置完成之后就开始创建一个初始项目了：

启动

cd vue-learn

npm run serve

用 Vue-Cli 创建项目的整体结构：

项目相关的代码，我们都放在 src 的文件夹中，该文件夹中的结构如下：

• assets 是资源文件夹，通常我们会把图片资源放在里面。

• components 文件夹通常会放一些组件。

• router 文件夹里面放的是 VueRouter 的相关配置。

• store 文件夹里面放的是 Vuex 的相关配置。

• views 文件夹里面通常放置页面的 .vue 文件。

• App.vue 定义了一个根组件。

• main.js 是项目的入口文件。

Vue-Cli 给我们提供了一个默认的项目文件结构，当然你并不是一定要按照这个文件结构来编写项目，你完全可以根据项目的需要或者个人喜好对项目结构加以改写。

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

用 Vue.js + VueRouter 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 VueRouter 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 VueRouter 在哪里渲染它们。在使用 VueRouter 之前，我们需要先了解 VueRouter 的两个内置组件：<router-link>：该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址，即要显示的内容。例：<router-link to="/index">首页</router-link>；<router-view>：该组件将渲染路由匹配到的组件内容。