1. Vue CLI
Vue CLI 概述
Vue CLI 是 Vue.js 官方提供的脚手架工具，用于快速搭建 Vue 项目，提供了开箱即用的开发环境和最佳实践配置。它可以集成 Webpack、Babel、ESLint、TypeScript 等工具，帮助开发者更高效地构建应用。
安装 Vue CLI
使用 npm 或 yarn 安装 Vue CLI 全局命令：
npm install -g @vue/cli
创建 Vue 项目
安装完成后，可以使用以下命令快速创建一个新的 Vue 项目：
vue create my-project
在创建过程中，Vue CLI 会询问是否要使用默认配置（包括 Babel、ESLint、Router 等），或者手动选择配置。
常用命令
-
启动开发服务器：
npm run serve该命令启动开发服务器并实时监视文件的更改，自动刷新浏览器。
-
构建生产环境代码：
npm run build这将使用优化后的设置将项目打包为生产可用的静态资源。
-
运行单元测试：
npm run test:unit
配置 Vue CLI
Vue CLI 提供了 vue.config.js 文件用于项目的自定义配置。以下是一个简单的配置示例：
module.exports = {
lintOnSave: false, // 禁用 ESLint
devServer: {
proxy: 'http://localhost:3000' // 设置代理
}
};
2. Vue DevTools
Vue DevTools 概述
Vue DevTools 是一个浏览器扩展，用于调试 Vue.js 应用。它提供了数据查看、组件树查看、事件追踪等功能，让开发者能够方便地检查和调试 Vue 应用的内部状态。
安装 Vue DevTools
Vue DevTools 可安装为 Chrome 或 Firefox 的浏览器扩展：
- Chrome：可以从 Chrome 网上应用商店下载 Vue.js DevTools。
- Firefox：可以从 Firefox 附加组件商店下载。
使用 Vue DevTools
安装完成后，打开 Chrome 或 Firefox 浏览器的开发者工具（F12 或 Ctrl+Shift+I），在其中可以看到 "Vue" 选项卡。在该选项卡下，可以查看 Vue 应用的组件树、Vuex 状态、事件追踪等。
- 组件树：查看应用中的组件结构，以及每个组件的数据（props 和 state）。
- 事件追踪：查看从组件触发的事件流，方便调试。
- Vuex 状态管理：当应用中使用 Vuex 时，Vue DevTools 会显示 Vuex 的状态变化历史。
3. 开发环境搭建（Webpack、Vite）
Webpack 开发环境
Webpack 是一个模块打包工具，Vue CLI 默认集成了 Webpack，用于打包 Vue 项目。
Webpack 配置示例
Vue CLI 中的 Webpack 配置被抽象化，但可以通过 vue.config.js 文件进行扩展。例如：
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src') // 定义别名
}
}
}
};
Vite 开发环境
Vite 是一个基于 ES Modules 的新一代打包工具，比传统的 Webpack 更快。Vite 支持热模块替换（HMR）、更快的启动时间和即时编译等功能。
使用 Vite 创建 Vue 项目
安装 Vite：
npm init @vitejs/app
选择 vue 模板并安装依赖：
cd my-vite-app
npm install
npm run dev
Vite 会快速启动开发服务器并实时编译代码。
Vite 配置示例
在 vite.config.js 中可以配置 Vite 的相关选项，例如：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
server: {
proxy: {
'/api': 'http://localhost:3000'
}
}
});
4. ESLint 和代码规范
ESLint 概述
ESLint 是 JavaScript 的代码检查工具，它可以帮助开发者发现代码中的错误，强制执行代码风格，保证代码的一致性。Vue CLI 默认集成了 ESLint。
安装 ESLint
如果项目未安装 ESLint，可以通过以下命令安装：
npm install eslint --save-dev
配置 ESLint
创建 .eslintrc.js 文件用于配置 ESLint 规则。以下是一个常见的配置示例：
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'eslint:recommended',
'plugin:vue/essential',
'@vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
};
extends：定义了 ESLint 使用的规则集，这里使用了 Vue 的基本规则。rules：可以根据需要自定义规则，例如在生产环境中禁用console和debugger。
使用 ESLint
在 Vue CLI 项目中，默认已经配置好 ESLint，可以通过以下命令检查代码中的问题：
npm run lint
ESLint 自动修复
如果 ESLint 发现了一些可以自动修复的问题，可以通过以下命令自动修复：
npm run lint --fix
5. 代码规范与 Prettier
Prettier 概述
Prettier 是一个代码格式化工具，用于自动格式化代码，保证代码风格一致。它与 ESLint 配合使用，可以确保代码既符合语法规则又风格统一。
安装 Prettier
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
配置 Prettier 与 ESLint 集成
在 .eslintrc.js 文件中，可以使用以下配置来整合 Prettier：
module.exports = {
extends: ['plugin:vue/essential', 'prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error'
}
};
创建 .prettierrc 文件用于配置 Prettier 格式化规则：
{
"semi": false,
"singleQuote": true,
"trailingComma": "none"
}
示例开发环境的最终步骤
-
安装 Vue CLI：
npm install -g @vue/cli vue create my-project -
安装 ESLint 和 Prettier：
npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier -
配置 ESLint 和 Prettier，创建
.eslintrc.js和.prettierrc文件。 -
启动开发服务器：
npm run serve
这样一个完整的 Vue 开发环境（包括 ESLint 和 Prettier 配置）就可以高效进行项目开发了。