第 3 章：使用 Vue 脚手架

一、初始化脚手架

1、说明

1、Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。

2、最新的版本是 4.x。

3、文档: https://cli.vuejs.org/zh/。

2、具体步骤

第一步 安装@vue/cli

（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：创建项目

切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

bable ：es5 ==> es5

eslint：语法检查

E:\代码\workspace-web\尚学堂代码
λ vue create vue_2022

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
> Default ([Vue 2] babel, eslint)
  Manually select features

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v5.0.8
✨  Creating project in E:\代码\workspace-web\尚学堂代码\vue_2022.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 847 packages in 34s
npm notice
npm notice New minor version of npm available! 8.3.1 -> 8.19.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.3
npm notice Run npm install -g npm@8.19.3 to update!
npm notice
�  Invoking generators...
�  Installing additional dependencies...


added 86 packages in 5s
⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project vue_2022.
�  Get started with the following commands:

 $ cd vue_2022
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

创建成功

第三步：启动项目

npm run serve

备注：

1、如出现下载缓慢请配置 npm 淘宝镜像：

npm config set registry https://registry.npm.taobao.org

2、Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，请执行：

vue inspect > output.js

3、模板项目的结构

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件