vue recordvue-admin-template是一个非常好的vue开源项目，看它的项目源码会让你受益匪浅。

题记：本篇文章记录搭建vue SPA项目过程以及项目中遇到的问题

一、vue-demo项目搭建

1.1 脚手架vue-cli3搭建

npm install -g @vue/cli  //安装脚手架
vue create vue-demo //创建vue-demo项目

注：这里需要了解 vue-cli3和旧版使用了相同的vue命令， vue cli2被覆盖。如果仍需要使用旧版的vue init 功能可以全局安装一个桥接工具：

npm install -g @vue/cli-init
vue init webpack vue-demo

1.2 安装vue-router、 vuex 、element-ui、axios

vue router 传送门、 vuex 传送门、 element传送门、 axios传送门

// 安装vue-router
npm install vue-router
//在一个模块化的打包系统中，您必须通过Vue.use(Vue.Router)
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(Vue.Router)

//安装vuex 
npm install vuex --save
//在一个模块化的打包系统中，您必须显示的通过Vue.use()来安装Vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//安装element-ui
npm i element-ui -S
//可以选择按需加载或者完整加载，下面是完整加载
import Vue from 'vue';
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

//安转axios
npm install axios

1.3 项目结构

vue-admin-template是一个非常好的vue开源项目，看它的项目源码会让你受益匪浅。本文创建的vue-demo项目结构也是参照它的形式

├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源index.html 之类
├── src                        
│   ├── api                    # 所有请求
│   ├── assets                 # 样式、图片等资源
│   ├── components             # 全局公用组件
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── router                 # 路由
│   ├── store                  # 全局store管理
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   ├── router.js              # 路由
│   └── permission.js          # 权限管理
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

1.4 关于登录权限

二、关于骨架屏的知识点Skeleton Screen Loading

在看到现在好多PC端网站都请求等待都不是loading转圈圈之类的，google后了解到这叫骨架屏（Skeleton Sreen Loading。所以打算项目中也引入骨架屏解决页面白屏问题、提升用户体验。

三文件上传进度问题

四遇到动态编辑表格无法更新问题

待更新

vue record