Vue 2 从陌生到熟悉，只需要一点点耐心！

Vue 2 环境搭建与项目搭建

以下是 Vue 2 的环境搭建、项目创建以及项目目录结构的详细说明。

---

一、环境搭建

1. 安装 Node.js

Vue 2 需要 Node.js 环境。如果未安装，请先下载并安装：

• 访问 Node.js 官网 下载最新 LTS 版本。

• 安装完成后，检查是否安装成功：

  node -v
  npm -v
  

2. 安装 Vue CLI

Vue CLI 是 Vue 项目的脚手架工具，用于快速创建和管理项目。

npm install -g @vue/cli

安装完成后，检查版本：

vue --version

---

二、项目搭建

1. 创建 Vue 2 项目

使用 Vue CLI 创建项目：

vue create my-project

在创建过程中，选择 Vue 2 模板：

1. 选择 Manually select features（手动选择功能）。
2. 勾选需要的功能（如 Babel、Router、Vuex 等）。
3. 选择 Vue 2.x 版本。

2. 启动开发服务器

进入项目目录并启动开发服务器：

cd my-project
npm run serve

访问 http://localhost:8080 查看项目。

---

三、项目目录详解

以下是 Vue 2 项目的典型目录结构及其作用：

my-project/
├── node_modules/         # 项目依赖包
├── public/               # 静态资源目录（不经过 webpack 处理）
│   ├── index.html        # 项目入口 HTML 文件
│   └── favicon.ico       # 网站图标
├── src/                  # 项目源码目录
│   ├── assets/           # 静态资源（图片、字体等）
│   ├── components/       # 组件目录
│   ├── views/            # 页面级组件
│   ├── router/           # 路由配置
│   ├── store/            # Vuex 状态管理
│   ├── App.vue           # 根组件
│   └── main.js           # 项目入口文件
├── .gitignore            # Git 忽略文件配置
├── babel.config.js       # Babel 配置文件
├── package.json          # 项目依赖和脚本配置
├── README.md             # 项目说明文件
└── vue.config.js         # Vue CLI 配置文件（可选）

---

1. node_modules/

• 存放项目依赖的第三方包。
• 通过 npm install 安装依赖时生成。

---

2. public/

• 存放不需要经过 webpack 处理的静态资源。
• index.html 是项目的入口 HTML 文件。

---

3. src/

assets/

• 存放需要经过 webpack 处理的静态资源（如图片、字体、样式文件）。

components/

• 存放可复用的 Vue 组件（如按钮、导航栏等）。

views/

• 存放页面级组件（如首页、关于页面等）。

router/

• 存放路由配置文件（使用 Vue Router）。

  import Vue from 'vue';
  import Router from 'vue-router';
  import Home from '@/views/Home.vue';
  
  Vue.use(Router);
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'Home',
        component: Home
      }
    ]
  });
  

store/

• 存放 Vuex 状态管理文件。

  import Vue from 'vue';
  import Vuex from 'vuex';
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++;
      }
    }
  });
  

App.vue

• 根组件，所有页面和组件都在此组件下渲染。

  <template>
    <div id="app">
      <router-view></router-view>
    </div>
  </template>
  
  <script>
  export default {
    name: 'App'
  };
  </script>
  

main.js

• 项目入口文件，初始化 Vue 实例并挂载到 DOM。

  import Vue from 'vue';
  import App from './App.vue';
  import router from './router';
  import store from './store';
  
  Vue.config.productionTip = false;
  
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app');
  

---

4. 配置文件

.gitignore

• 配置 Git 忽略的文件和目录（如 node_modules/）。

babel.config.js

• 配置 Babel 的编译规则（如 ES6+ 语法转换）。

package.json

• 记录项目依赖和脚本命令。

  {
    "name": "my-project",
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build"
    },
    "dependencies": {
      "vue": "^2.6.14",
      "vue-router": "^3.5.2",
      "vuex": "^3.6.2"
    }
  }
  

vue.config.js

• Vue CLI 的配置文件（可选）。

  module.exports = {
    devServer: {
      port: 8080, // 修改开发服务器端口
      proxy: 'http://localhost:4000' // 配置代理
    }
  };
  

---

四、常用命令

1. 启动开发服务器：

   npm run serve
   

2. 打包项目：

   npm run build
   

3. 安装依赖：

   npm install package-name
   

4. 运行测试：

   npm run test