# d7c-vue2-cli

**Repository Path**: chunxi_123/d7c-vue2-cli

## Basic Information

- **Project Name**: d7c-vue2-cli
- **Description**: 使用 vue-cli 脚手架 webpack 模板初始化一个 Vue2 版本的 Vue 项目。
- **Primary Language**: NodeJS
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: http://www.d7c.top/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-08-26
- **Last Updated**: 2025-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# d7c-vue2-cli

## 介绍

使用 vue-cli 脚手架 webpack 模板初始化一个 Vue2 版本的 Vue 项目。

## 软件架构

### 应用程序依赖包管理工具 npm

npm 官网地址：[https://www.npmjs.com](https://www.npmjs.com/)，npm 全称 Node Package Manager 是 node 应用程序依赖包的管理工具，包括安装、卸载、更新模块操作，使用 nodejs 开发时一般使用 npm 来管理 nodejs 中的包。

### 自动化构建工具 webpack

webpack 官网地址：[https://www.webpackjs.com/](https://www.webpackjs.com/)，webpack 是一个前端资源加载、打包工具。

### 构建用户界面的渐进式 JavaScript 框架 vuejs

vue2 中文官网地址：[https://cn.vuejs.org/](https://cn.vuejs.org/)，vuejs github 地址：[https://github.com/vuejs/vue](https://github.com/vuejs/vue)，vue 官方扩展工具地址：[https://github.com/vuejs](https://github.com/vuejs)，vue 官方论坛地址：[https://forum.vuejs.org/](https://forum.vuejs.org/)，[开发文档](https://cn.vuejs.org/v2/guide/installation.html)。

## 安装教程

### 1. 在码云上创建 d7c-vue2-cli 仓库并克隆到本地


### 2. 安装全局 vue-cli

```
npm install vue-cli@2.9.6 -g
```

<img src="./docs/02 全局安装 vue-cli.png">

### 3. 在本地仓库的上级目录使用 webpack 模板初始化该项目

```
vue init webpack d7c-vue2-cli
```

<img src="./docs/04 初始化一个 Vue2 版本的 Vue 项目(1).png">

### 4. 安装 vuex 状态管理模块（在初始化该项目时已经安装了 vue-router 模块）

```
npm install vuex@3.6.2 --save
```

<img src="./docs/06 安装 vuex 状态管理模块.png">

### 5. 运行测试

```
cd d7c-vue2-cli
npm run dev
```

### 6. 开启运行后自动打开浏览器选项配置

```
./config/index.js > module.exports > dev > autoOpenBrowser: true
```

### 7. 解决 npm run build 后运行编译项目浏览器上不显示，F12 查看错误信息为 Uncaught SyntaxError: Unexpected token '<'

```
解决方案：修改 ./config/index.js > module.exports > build > assetsPublicPath: './'
```

## 使用说明

### 1. 克隆并安装项目，在项目根目录下执行

```
npm install
```

### 2. 其他命令

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

## 运行展示

![首页](https://images.gitee.com/uploads/images/2021/0609/120923_485e5364_1070311.png "QQ图片20210609120743.png")

## 捐助打赏

如果您觉得我们的开源软件对你有所帮助，请扫下方二维码打赏我们一杯咖啡。
![微信收款码](https://images.gitee.com/uploads/images/2021/0222/174352_b22739f5_1070311.jpeg "微信收款码.jpg")
![微信赞赏码](https://images.gitee.com/uploads/images/2021/0222/174521_67e18b39_1070311.jpeg "微信赞赏码.jpg")
![支付宝收款码](https://images.gitee.com/uploads/images/2021/0222/174540_94a9ac41_1070311.jpeg "支付宝收款码.jpg")

## 参与贡献

1.  Fork 本仓库
2.  新建 d7c-vue2-cli_xxx 分支
3.  提交代码
4.  新建 Pull Request

## 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

<style>p{text-indent:2em}</style>