【vue】初始化 Vue 项目

文章目录

- - [初始化 Vue 项目](#初始化 Vue 项目)
  - 项目配置调整
  - 代码结构与规范
  - 构建与部署

初始化 Vue 项目

环境准备

确保本地已安装 Node.js（建议版本 16+）和 npm/yarn。可通过以下命令检查版本：

bash 复制代码

node -v
npm -v

安装 Vue CLI

全局安装 Vue CLI 工具（如已安装可跳过）：

bash 复制代码

npm install -g @vue/cli
# 或使用 yarn
yarn global add @vue/cli

创建新项目

通过 Vue CLI 初始化项目，my-project 为自定义项目名：

bash 复制代码

vue create my-project

交互式选择配置：

手动选择特性（Manually select features），勾选 Babel、Router、Vuex 等所需模块。
选择 Vue 3 或 Vue 2 版本。
其他选项如 ESLint、单元测试按需选择。

启动开发服务器

进入项目目录并运行：

bash 复制代码

cd my-project
npm run serve

访问 http://localhost:8080 查看默认页面。

项目配置调整

修改 Vue 配置文件

根目录下创建或编辑 vue.config.js 覆盖默认配置，例如修改端口：

javascript 复制代码

module.exports = {
  devServer: {
    port: 3000,
  },
};

安装常用依赖

按需安装 axios、sass 等工具：

bash 复制代码

npm install axios sass --save
# 或使用 yarn
yarn add axios sass

路由配置示例

在 src/router/index.js 中定义路由规则：

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  { path: '/', component: Home },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

代码结构与规范

目录结构说明

public/：静态资源（如 HTML 模板）。
src/：核心代码目录。
- assets/：样式、图片等资源。
- components/：可复用组件。
- views/：页面级组件。
- store/：Vuex 状态管理（若启用）。

ESLint 配置

修改 .eslintrc.js 自定义代码规范，例如关闭分号检查：

javascript 复制代码

rules: {
  'semi': ['error', 'never'],
}

构建与部署

生成生产环境代码

运行构建命令生成优化后的代码：

bash 复制代码

npm run build

输出文件位于 dist/ 目录，可直接部署到服务器。

配置多环境变量

创建 .env.development 和 .env.production 文件区分环境变量：

复制代码

# .env.development
VUE_APP_API_URL=http://dev.api.com

代码中通过 process.env.VUE_APP_API_URL 调用。