Vue学习笔记(九) Vue CLI

1、简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它包括三个独立的部分：

• CLI：一个全局安装的 npm 包，提供在终端里使用的命令
• CLI 服务：一个局部安装在使用了 @vue/cli 创建的项目中的 npm 包
• CLI 插件：CLI 插件可以为项目提供可选功能的 npm 包

这里先附上 Vue CLI 官方文档：https://cli.vuejs.org/zh/guide/

2、安装

在 3.x 版本之后，cli 从原来的 vue-cli 更名为 @vue/cli

如果之前安装过 vue-cli，那么需要先卸载

> npm uninstall -g vue-cli

然后才能安装 @vue/cli

> npm install -g @vue/cli

安装成功之后，可以使用如下命令验证安装是否成功

> vue -V

3、单文件组件

在正式讲解怎么使用 @vue/cli 搭建项目前，我们先来了解一下什么是单文件组件（SFC）

很多时候，我们可以使用 Vue.component() 定义全局组件，然后使用 new Vue() 在页面指定一个容器元素

除了这种方法之外，我们还可以使用一个拓展名为 .vue 的文件定义组件，这种方法我们称为单文件组件

每个 .vue 文件包含三种类型的顶级语言块，分别是 <template>、`

```

3、快速原型开发

我们可以使用 vue serve 和 vue build 命令对单个 .vue 文件进行快速原型开发

不过在此之前，我们需要先额外安装一个全局拓展

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

（1）vue serve

vue serve 命令用于在开发环境下零配置为 .js 或 .vue 文件启动一个服务器

> vue serve --help
Usage: serve [options] [entry]

serve a .js or .vue file in development mode with zero config

Options:
  -o, --open  Open browser
  -c, --copy  Copy local url to clipboard
  -h, --help  output usage information

该命令的默认入口文件为 main.js、index.js、App.vue 或 app.vue ，当然也可以显示指定

我们可以到刚才创建的 Hello.vue 文件的文件夹下运行如下命令

> vue serve Hello.vue

DONE Compiled successfully in 5267ms

    App running at:
    - Local: http://localhost:8080
    - Network: http://172.20.10.12:8080
    
    Note that the development build is not optimized.
    To create a production build, run `npm run build`.

这时候，我们在浏览器中访问 http://localhost:8080 即可看到我们的应用

（2）vue build

vue build 命令用于在生产环境模式下零配置构建一个 .js 或 .vue 文件

> vue build --help
Usage: build [options] [entry]

build a .js or .vue file in production mode with zero config

Options:
  -t, --target <target>  Build target (app | lib | wc | wc-async, default: app)
  -n, --name <name>      name for lib or web-component mode (default: entry filename)
  -d, --dest <dir>       output directory (default: dist)
  -h, --help             output usage information

4、创建项目

1. 我们可以使用 vue create project-name 命令创建一个项目

> vue create mini-project

1. 首先，选择一个预设的模板，这里有两个选项（单选）：

• default (babel, eslint)：默认设置，适合创建一个简单的项目
• Manually select features：手动配置，适合在生产环境中使用（绝大多数情况下需要选择这个）

我们选择 Manually select features

? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
> Manually select features

1. 然后，选择需要使用的特性，这里有九个选项（多选）：

• Babel：JavaScript 编译器（默认已选择）
• TypeScript：JavaScript 超集
• Progressive Web App (PWA) Support：渐进式 Web 应用
• Router：Vue 路由
• Vuex：Vue 状态管理
• CSS Pre-processors：CSS 预处理器
• Linter / Formatter：代码风格检查和代码格式化（默认已选择）
• Unit Testing：单元测试
• E2E Testing：端到端测试

我们选择 Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
  (*) Babel
  ( ) TypeScript
  ( ) Progressive Web App (PWA) Support
  (*) Router
  (*) Vuex
> (*) CSS Pre-processors
  (*) Linter / Formatter
  ( ) Unit Testing
  ( ) E2E Testing

1. 接着，为 Router 选择路由模式，这里有两个选项（Y/n）：

• Y：使用 history mode，URL 中不带有 # 符号，但是需要后台配置支持
• n：使用 hash mode，URL 中会带有 # 符号，但 # 符号并不包含在 HTTP 请求中

我们选择 n

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

1. 接着，选择 CSS Pre-processors，这里有四个选项（单选）

• Sass/SCSS (with dart-sass)
• Sass/SCSS (with node-sass)
• Less
• Stylus

我们选择 Less

? Pick a CSS Pre-processors (PostCSS, Autoprefixer ans CSS Modules are supported by default): (Use arrow keys)
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

1. 接着，选择 Linter / Formatter，这里有四个选项（单选）：

• ESLint with error prevention only
• ESLint + Airbnb config
• ESLint + Standard config
• ESLint + Prettier

我们选择 ESLint + Standard config

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

1. 接着，选择在什么时间进行检测，这里有两个选项（多选）：

• Lint on save：保存时检测
• Lint and fix on commit：提交时检测

我们选择 Lint on save

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> (*) Lint on save
  ( ) Lint and fix on commit

1. 接着，选择在什么位置保存配置文件，这里有两个选项（单选）：

• In dedicated config files：独立保存为 config 文件
• In package.json：全部保存在 package.json 文件

我们选择 In dedicated config files

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow  keys)
> In dedicated config files
  In package.json

1. 最后，选择是否保存本次配置以便于下次使用，这里有两个选项（y/N）：

• y：保存配置
• N：不保存配置

我们选择 N

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

之后，就可以等待 @vue/cli 为我们创建项目啦~

5、项目结构

在创建成功之后，我们可以利用命令 cd mini-project 进入目录，利用命令 npm run serve 运行项目

这些就不细说啦，具体用法可以参考一下 README.md 文件（在根目录下）

下面我们主要看看利用 @vue/cli 创建的项目的目录结构是怎么样的

+ mini-project
    + node_modules（存放模块）
    + public（存放静态文件，放置在该目录下的资源不会做编译压缩处理）
        - favicon.ico
        - index.html（入口页面）
    + src（我们自己写的文件一般放在这个文件夹下）
        + assets（存放资源文件）
        + components（存放公共组件）
        + views（存放视图组件）
        - App.vue（页面入口文件，引用其它组件）
        - main.js（程序入口文件，初始化实例）
        - router.js（路由管理：Router）
        - store.js（状态管理：Vuex）
    - package.json（项目配置文件）
    - package-lock.json（项目配置文件）
    - babel.config.js（babel 配置文件）
    - postcss.config（postcss 配置文件）
    - README.md（项目说明文档）
    - ...（其它配置文件）

6、vue.config.js

最好，我们来看一下 vue.config.js 是什么？

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，则会被 @vue/cli-service 自动加载

但是由于篇幅问题，下面只会列举几个常用的配置项，详细内容请参考官方文档：https://cli.vuejs.org/zh/config/

• publicPath：部署应用包时的基本 URL
• outputDir：当运行 vue-cli-service build 时生成的生产环境构建文件的目录
• assetsDir：指定生成的静态资源 (js、css、img、fonts) 的输出目录 (相对于 outputDir)
• indexPath：指定生成的 index.html 的输出路径 (相对于 outputDir)
• configureWebpack：用于配置 webpack 的其它选项
• devServer：所有 webpack-dev-server 的选项都支持

转载于:https://www.cnblogs.com/wsmrzx/p/11226864.html