vue安装与脚手架搭建

Vue2前端项目模板介绍
前端项目模板是基于 Vue2+ElementUI 创建的。提供了网络请求、状态管理、路由等基础功能。

1.功能
 集成网络请求 Axios
 集成数据模拟 Mock
 集成状态管理 Vuex
 集成路由管理 Router
 Element UI 组件
 实现前后端项目数据联动
 提供 Demo 页面（表格、表单、目录树，下拉框）

2.技术栈

3.安装脚手架
3.1.前提条件

1. 安装node，版本不应太新，否则安装报错 ；然后node –v npm –v查看是否安装成功，显示版本号则安装成功
   命令：node –v
   命令：npm –v
   
2. 安装Vscode；
   注意：在vscode里安装Vetur插件
   
   3.2.安装脚手架
    全局安装
   命令：npm install –g @vue/cli
    查看功能
   命令：vue
   3.3.创建项目
   命令：vue create xxx-xx(目录名)
    手动选择安装
   
    安装Router（路由）、Vuex（现状管理）CSS编译器
   
    选择2.x版本
   
    是否使用history路由模式(不带#号的)，输入 n
   
    选择css 模式，我们选择 less（选sass或less都可以，语法一样）
   
    选择模块版本存储位置（不单独放在一个文件里）
   
    是否保存创建的选项，保存的话，下次创建也会按这个选择来创建，先选择 n 不保存
   
    进入创建好的文件夹，并启动文件夹
   命令：cd xxx-xx
   命令：npm run serve
   
    浏览器输入http://localhost:8080打开项目
   
    把多余页面删掉，创建一个自己的页面
   ①把views、components目录下的文件全部删掉。App.vue文件中的样式和nav删掉。router文件夹下index.js文件引入的路由删掉
   
   
   ②首先创建自己的一个文件layout->index.vue;其次在router->index.js中引入自己的文件；最后在浏览器输入/layout，就可以看到自己写的页面了
   
   
   
   4.安装Element-ui库
   4.1.安装与引入
    安装
   命令：npm i element-ui –S
    引入
   在main.js里引入element
   
    使用
   
   5.安装axios与mock
   5.1.安装与引入
    安装axios
   命令：npm install axios –saves

 安装mock(模拟接口，真实项目开发后台提供接口，无需安装mock)
命令：npm install mockjs --save-dev

 使用
新建mock->mock.js文件,并模拟一个列表数据

在layout->index.vue下通过axios调用mock中的接口

拿到数据

6.demo项目下载与安装
命令：npm install
命令：npm run serve