使用Vue搭建前端项目架构_vue 官网搭建 架构

一、创建Vue项目基础框架

 

1.使用vue cli脚手架创建项目的基础框架

具体vue的配置如下：

 2.配置.gitignore文件=>在提交到GitHub时不要提交node modules文件

二、创建GitHub仓库

1.在GitHub上创建仓库

2.clone仓库到本地

3.将上面使用vue cli创建的项目基础框架文件复制到上面仓库目录中

4.选择性push代码（也可以后面的工作完成后再push）

三、完善项目架构

前期工作：

1.安装axios（向后台异步请求数据）

npm install --save axios vue-axios

然后在main.js中引入并使用

//引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
//使用axios
Vue.use(VueAxios, axios)

 2.安装element-ui组件

npm i element-ui -S

然后在main.js中引入并使用

//引入axios
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//使用axios
Vue.use(ElementUI);

3.在根目录下创建.env.development开发环境配置文件，将开发环境的后端接口地址配置在这里

NODE_ENV = development
VUE_APP_API_URL=http://81.70.223.139:8091//后端接口地址

然后我们配置各种文件进行封装，在src目录下创建utils文件夹：

1.在utils文件夹中创建request