Vue CLI创建项目指南

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',
  // 生产环境是否生成 sourceMap
  productionSourceMap: 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. 参考资料

1. Vue CLI官方文档：https://cli.vuejs.org/
2. Vue2官方文档：https://v2.vuejs.org/
3. Vue Router文档：https://router.vuejs.org/
4. Vuex文档：https://vuex.vuejs.org/