中国网购网站十大排名今日时政新闻
Vue CLI创建项目指南
1. 环境准备
1.1 安装Node.js
确保已安装Node.js（建议版本12.0.0或更高）
node -v
npm -v
1.2 安装Vue CLI
npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli
1.3 检查安装
vue --version
2. 创建项目
2.1 使用图形界面创建
vue ui
- 打开浏览器访问 http://localhost:8000
- 点击"创建"按钮
- 选择项目目录
- 选择预设或手动配置
2.2 使用命令行创建
vue create my-vue-app
2.3 选择预设
? Please pick a preset:Default ([Vue 2] babel, eslint)Default (Vue 3) ([Vue 3] babel, eslint)Manually select features
2.4 手动选择功能
? Check the features needed for your project:◉ Babel◉ TypeScript◉ Progressive Web App (PWA) Support◉ Router◉ Vuex◉ CSS Pre-processors◉ Linter / Formatter◉ Unit Testing◉ E2E Testing
3. 项目结构说明
my-vue-app/
├── public/ # 静态资源目录
│ ├── favicon.ico # 网站图标
│ └── index.html # HTML模板
├── src/ # 源代码目录
│ ├── assets/ # 项目资源文件
│ ├── components/ # 公共组件
│ ├── views/ # 页面视图
│ ├── router/ # 路由配置
│ ├── store/ # Vuex状态管理
│ ├── api/ # API接口
│ ├── utils/ # 工具函数
│ ├── styles/ # 全局样式
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── .gitignore # Git忽略文件
├── babel.config.js # Babel配置
├── package.json # 项目配置
├── vue.config.js # Vue CLI配置
└── README.md # 项目说明
4. 配置说明
4.1 vue.config.js
module.exports = {// 基本路径publicPath: '/',// 输出文件目录outputDir: 'dist',// 静态资源目录assetsDir: 'static',// 生产环境是否生成 sourceMapproductionSourceMap: false,// 开发服务器配置devServer: {port: 8080,open: true,proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true}}},// webpack配置configureWebpack: {resolve: {alias: {'@': path.resolve(__dirname, 'src')}}}
}
4.2 package.json
{"name": "my-vue-app","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"vue": "^2.6.14","vue-router": "^3.5.1","vuex": "^3.6.2","axios": "^0.21.1","element-ui": "^2.15.6"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-service": "~4.5.0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^6.2.2","sass": "^1.26.5","sass-loader": "^8.0.2"}
}
5. 常用依赖安装
5.1 UI组件库
# Element UI
npm install element-ui -S# 或者使用Vant
npm install vant -S
5.2 HTTP请求
npm install axios -S
5.3 样式预处理器
# SASS
npm install sass sass-loader -D# Less
npm install less less-loader -D
5.4 工具库
# 日期处理
npm install dayjs -S# 工具函数
npm install lodash -S
6. 项目初始化配置
6.1 配置路由
// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',component: () => import('@/views/Home.vue')}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router
6.2 配置Vuex
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++}},actions: {increment({ commit }) {commit('increment')}},modules: {// 模块化配置}
})
6.3 配置HTTP请求
// src/utils/request.js
import axios from 'axios'const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000
})service.interceptors.request.use(config => {// 请求拦截器return config},error => {return Promise.reject(error)}
)service.interceptors.response.use(response => {// 响应拦截器return response.data},error => {return Promise.reject(error)}
)export default service
7. 开发规范
7.1 文件命名规范
- 组件文件：PascalCase命名，如
UserProfile.vue - 工具文件：camelCase命名，如
formatDate.js - 样式文件：kebab-case命名，如
main-style.scss
7.2 代码规范
- 使用ESLint进行代码检查
- 使用Prettier进行代码格式化
- 遵循Vue风格指南
7.3 Git提交规范
- feat: 新功能
- fix: 修复bug
- docs: 文档更新
- style: 代码格式调整
- refactor: 代码重构
- test: 测试相关
- chore: 构建过程或辅助工具的变动
8. 开发流程
8.1 启动开发服务器
npm run serve
8.2 构建生产环境
npm run build
8.3 代码检查
npm run lint
9. 常见问题解决
9.1 跨域问题
在vue.config.js中配置代理
devServer: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true}}
}
9.2 环境变量配置
创建.env文件
VUE_APP_BASE_API=/api
9.3 路径别名配置
在vue.config.js中配置
configureWebpack: {resolve: {alias: {'@': path.resolve(__dirname, 'src')}}
}
10. 参考资料
- Vue CLI官方文档：https://cli.vuejs.org/
- Vue2官方文档：https://v2.vuejs.org/
- Vue Router文档：https://router.vuejs.org/
- Vuex文档：https://vuex.vuejs.org/