【Vue 学习】Vue CLI 脚手架的使用

一、前提

已经安装 npm 包管理工具，并进行过全局环境变量的配置，如下

二、Vue CLI 的使用

1. 安装

# 首次安装
npm install -g @vue/cli

# 后续更新
npm update -g @vue/cli

2. 测试

vue --version

3. 使用

命令行创建 vue 项目

vue create vue-demo

命令输入之后，会提示选择创建的方式，这里选择以 vue2 为模板创建项目【方向键用来移动，回车用来确定】

成功选择以 vue2 为模板创建项目，项目创建成功之后如下

根据上面的提示运行输入命令，项目运行成功如下

# 进入目录
cd demo-first

# 运行
npm run serve

访问项目

# 浏览器访问
http://localhost:8080/

三、个性化定制脚手架

1. 查看 Vue CLI 脚手架的默认配置

在终端使用 vue inspect > output.config.js 命令输出一个 Vue CLI 的默认配置文件，该文件仅用来展示脚手架的默认配置，对该文件的修改不会影响脚手架的工作

2. 修改默认配置

官方文档：默认配置

如果想要修改 Vue CLI 的默认配置，需要在 vue.config.js 里面修改，vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载

module.exports = {
    // 入口
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
        }
    },
    // 关闭语法检查
    lintOnSave: false,
}