一、创建项目
1、查看是否安装了，创建vue项目所需的依赖
原因：vue依赖于npm和node，又因为npm依赖于node，所以在新建项目前先安装好node，打开cmd窗口，输出node -v看看有无安装成功。
有显示指定node版本说明node安装成功
2、查看是否安装VUE脚手架
打开cmd窗口，输入vue --version看看有无安装vue脚手架。
有显示指定版本为安装成功
3、创建项目
命令：vue create 项目名（这里我使用了Git）Git安装和使用
4、启动项目
使用vscode打开项目，在终端输入npm run serve或cnpm run serve运行项目
5、运行结果
二、配置项目框架所需要的组成部分
其实主要是：建立合理的文件夹、vue-router的配置、axios的封装、vuex的配置、vue.config.js文件的配置、开发所需依赖的引入（例子：less/scss，如果是大屏项目做大屏适配方案、Element UI……）
1、建立合理的文件夹
（1）、App.vue文件；
入口文件
（2）、main.js文件；
全局配置文件；
注意：从上往下说明src下的各个文件夹的作用：
（3）、src => api文件夹
项目各个模块接口调用的封装；
（4）、src => assets文件夹
用于存放项目各个模块组件的静态资源文件；
（5）、src => filters文件夹
过滤器文件，格式化时间、格式化一些数据……
（6）、src => pages文件夹
存放项目各个模块的各个组件的文件夹。（简单说就是各个页面文件）
（7）、src => plugin文件夹
用于存放插件，例如：封装axios,用到接口的调用文件中（src=>api文件夹）
（8）、src => router文件夹
路由的封装； index.js是总的路由封装； routerConfig.js是路由标配置文件；
（9）、src => store文件夹
使用vuex技术做状态管理统一管理页面所需数据供全局使用；
（10）、src => styles文件夹
存放“公共样式”
（11）、src => utils文件夹
用于存放资源类库
2、vue-router的配置
（1）、先进性vue-router的安装；
在项目终端里输入npm install vue-router --save或cnpm install vue-router --save，回车，完成安装；
在package.json文件中看到如上图所示，表示安装成功；
（2）、编写路由文件
代码如下：
// 引入vue模块
import Vue from 'vue'
// 引入路由模块
import Router from 'vue-router'
Vue.use(Router)
// 定义路由实例
const router = new Router({
mode: 'history',
routes: [{
path: '/',
redirect: '/index'
},
{
path: '/index',
name: 'Index',
component: () => import('@/pages/index')
},
]
})
// 将路由实例暴露出来
export default router
