Vue-CLI 脚手架搭建 Vue.js 项目

Vue.js 是一个渐进式 JavaScript 框架，通过 Vue-CLI 可以快速搭建一个 Vue.js 项目环境。

本文需要配置以下软件：

• Node.js 和 npm
• Vue-CLI 3：npm i -g @vue/cli

1. 创建项目

使用 Vue-CLI 3 快速搭建一个 Vue.js 项目

↑↓ 移动、Space选择/反选、Enter确认

终端中输入以下命令，回车执行

vue create { 短横线命名的 项目名 }

选择配置（可以使用此前保存的配置）

• 首次配置，选择 > Manually select features 自定义配置项
• 可以保存本次配置，下次快速创建同配置的项目

# Please pick a preset:

### 选择: Babel, TS, Router, Vuex, CSS Pre-processors

# Babel: ES6转ES5 编译器
# TypeScript: JavaScript 超集，支持面向对象
# PWA Support: 渐进式增强 Web 应用
# Router: Vue 路由
# Vuex: Vue 状态管理
# CSS Pre-processors: CSS 预处理器
# Linter / Formatter: 代码风格、格式校验
# Unit Testing: 单元测试
# E2E Testing: 端对端测试

使用 class 风格装饰器 => Yes

# Use class-style component syntax? (Y/n)

# 不使用装饰器: home = new Vue()
# 使用后: class home extends Vue{}

使用 Babel 结合 TS（实现自动检测Polyfills、转换 JSX） => Yes

# Use Babel alongside TypeScript

路由开启 History 模式 => Yes

# Use history mode for routers

选择一个 CSS 预处理器 => Sass/SCSS (with dart-sass)

# Pick a CSS pre-processor

### node-sass 实时自动编译
### dart-sass 需要保存后生效

将 Babel、PostCSS、ESLint 等的配置放在哪里？ => In package.json

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

# In dedicated config files ### 放在各自的配置文件中
# In package.json ### 放在 package.json 中

保存本次配置项 => Yes

# Save this as a preset for future projects?

# Save preset as: { 配置名称 }

等待项目构建完成……

2. 启动项目

Vue-CLI 3 启动命令由 dev 改为 serve

cd { 项目目录 }
npm run serve

3. 打包

使用 npm run build 打包项目。

打包后的文件，位于项目文件夹的 /dist 内。