Vue项目开发相关问题总结。

一、创建一个项目（两种方式）

1.通过CLI命令行创建，具体步骤如下：（1）Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。（2）下载vue命令行工具-----------$ npm install -g @vue/cli     检查版本-----$ vue -V     3.0以上都可以  （3）创建项目开始（网上有很多创建步骤，每个人有不同的问题，我也不喜欢这种创建方式，更加适用第二种）
2.通过图形化界面创建项目（1）上述满足（1）（2）条件下。打开命令行，运行----vue ui（2）等待一会自动跳转到浏览器，图形化创建界面（3）点击左下角（更多）--->项目管理器--->点击（项目、创建、导入）中的创建。选择自己确定的目录，点击创建即可。（4）按照操作输入项目名称、包管理器选择默认（就是npm）或者npm，其他都默认 直接下一步，预设也为默认，当然也可以手动，差别不大（5）等一会、嘿嘿，就创建好了。
3.项目所需要的依赖下载依赖位置---直接在界面左侧第三个依赖里面，安装依赖，一般所需要的依赖有axios--->基于promise用于浏览器和node.js的http客户端（主要在请求时用到）v-charts、echarts--->表格图表时使用，两个都安装上，不会出错element-ui--->组件库，自我感觉这个组件库很好，很容易上手vue-router--->一般默认安装会没有这个依赖，手动添加一下（必须有）
4.然后就是开始我们的开发项目了（1）打开项目创建的目录，会发现一堆东西，其实我们需要编辑的只有几个地方网上目录结构很全（https://v.hnz.kim）里面的"vue开发"下面有目录结构，一般用到最多的就是components（放组件的）views（页面）App.vue （第一页放置区域入口区）main.js（入口js文件）router.js(路由加载)vue.config.js(配置文件，每修改一次，就要重新启动一次项目，很多默认创建会没有这个文件)assets（资源目录，放置图片、icon）
5.登录页（1）登录页一般就是这个项目的第一页，需要实现的功能有，登录验证，账号密码的类型、长度，并且cookie的问题不用我们自己去写样式和功能，element-ui帮我们写的明明白白的，1）首先在main.js中引入element-ui组件库，三行代码：import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)2）为了协同开发，登录页肯定是要写在一个组件中，挂载到App.vue中作为默认第一页template：<router-view><login></login></router-view>script：import login from "./components/login.vue"export default {name: 'App',components:{login}}3）在login.vue中写页面的布局，引入element-ui，写相应的方法即可
6.index页（1）index页和登录页是两个页面，并且需要实现跳转，因此login和index写两个不同的路由，兄弟级，routes: [{path: '/',name: 'login',component: () => import('@/components/login'),},{path: '/index',name: 'index',component: () => import('@/components/Index'),meta:{title:"主页"},]（2）因为首页的侧边栏有很多页面，并且都在index首页中，因此，他们都要写在index路由的子路由中，相互之间是兄弟级，{path: '/index',name: 'index',component: () => import('@/components/Index'),meta:{title:"主页"},children: [{path: "/Dashboard",name: "Dashboard",component: () => import('@/components/MVP/Dashboard'),meta: {title: "仪表盘",icon: "el-icon-eleme"}},{path: "registration",name: "registration",component: () => import('@/components/MVP/registration'),meta: {title: "资产登记",icon: "el-icon-s-order"}（3）导航栏的每一栏都是一个组件，在组件中写页面的布局，侧边导航栏在index中呈现方式直接引用导航栏组件，然后通过遍历得到每一个v.title，v.icon,（4）导航栏侧边栏当再有下一级时注意嵌套遍历，同时路由中也要再写子路由

7.面包屑在vue项目中的用法(1)我们可以写一个面包屑的组件，引用element-ui组件样式，<template><div>    <el-breadcrumb separator="/" class="breads" style="color: #303133;"><el-breadcrumb-item v-for="v in lists" :to="{path:v.path}">{{v.meta.title}}</el-breadcrumb-item></el-breadcrumb></div></template><script>export default {data:function(){return{lists:[]}},created() {this.lists=this.$route.matched;},}</script>(2)在需要使用面包屑组件的页面中引入这个组件，还是那一套步骤<!-- 面包屑 -->temeplat中：<bread></bread>  script中：import bread from "@/components/bread.vue";引入components: {bread,},挂载/注册一下，就ok了
8.echarts使用方法（1）首先在main.js全局环境下引入并调用，三行代码import echarts from 'echarts'import VCharts from 'v-charts' 两个有引入保险Vue.prototype.$echarts = echartsVue.use(VCharts)（2）在需要引入echarts页面中建立一个盒子，必须有宽高然后就直接去echarts官网或者v-charts官网查找自己需要的样式类似element-ui那样引入就ok了具体的样式调整需要渊博的知识储量了<ve-pie:legend='{   标签位置type: "scroll",orient: "vertical",right: 10,top: 20,bottom: 20,data: chartData.columns   columns中写的是相关标签，写在chatData下面}':series="{       图表 name: '姓名',type: 'pie',radius : '35%',  大小center: ['30%', '25%'],   位置data: chartData.rows}"></ve-pie>
9.table表格（1）element-ui里面有很多样式，直接引入使用，有些具体的方法和属性有特别的作用，灵活使用，fixed ：将这一列固定，可以为left或者right，比如在单选框和最后边的操作会用到（2）状态列建立一个状态组件，模拟数据，根据状态码确定状态，具体代码如下：页面中代码：import status from "@/components/status.vue";   首先引入状态组件页面中：<el-table-column prop="statuss" label="资产状态" width="70"><template slot-scope="scope"><status :status="scope.row.statuss"></status></template></el-table-column>组件中写法：<template><div><div class="statu" :style="{backgroundColor:assetstatus[status].color}">{{ assetstatus[status].label }}</div></div></template><script>export default {data(){return {assetstatus:{0:{label:"闲置",color:"#ff6700"},1:{label:"维修",color:"rgb(103, 194, 58)"},2:{label:"报废",color:"rgb(64, 158, 255)"},3:{label:"在用",color:"rgb(245, 108, 108)"},}}},props:{status:{required:true,type:Number,default:0}}}</script>（3）新增点击新增会弹出一个form，并且可以实现添加功能还是引入组件库，里面添加相对应的内容（4）删除elenment-ui引入，需要判断单选和多选框1）给删除按钮添加一个click事件，2）给table添加 @select="del" @select-all="delall"3）定义一个对象，Del：{}，将选择的值val传给Deldel(val) {this.Del = val;},delall(val) {this.Del = val;},给删除点击事件一个判断条件if（this.Del.length > 0）{执行删除代码}else{this.$alert（'你还没有选择任何数据')}（5）查看和编辑给input输入框绑定一个属性---->:readonly="readonly"，默认是false，可以编辑，当为true的时候，只能查看不能编辑。1）给所有的input框绑定属性--->:readonly="readonly"2）给查看和编辑一个点击事件<el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="handerclick(scope.row)" type="text" size="small">查看</el-button><el-button @click="ediclick(scope.row)" type="text" size="small">编辑</el-button></template></el-table-column>3）点击事件函数：//查看handerclick(val) {// console.log(val)这两行解决点击编辑后，编辑内容后不点击确定，使表格中内容不发生变化let _val = JSON.parse(JSON.stringify(val));this.formData = _val;this.dialogFormVisible = true;  显示弹窗this.readonly = true;   为true时只读，不能编辑},//编辑    内容同上含义ediclick(val) {// console.log(val)let _val = JSON.parse(JSON.stringify(val));this.formData = _val;this.dialogFormVisible = true;this.readonly = false;},
10.过滤器可以设置一个局部的过滤器，也可以全局的，下面的是全局的，局部的很多地方都能查到，简单（1）先建立一个放过滤器的js文件，可能会有很多过滤器（日期、金额都放在这个文件中）这里写了一个关于金额的过滤器，非常简单的使用，js中代码如下：// 金钱let currency= function (value = '0', currencyType = '￥', limit = 2) {let res;value = Number(value)value = value.toFixed(limit);let prev = value.toString().split('.')[0]; //获取整数部分let next = value.toString().split('.')[1];res = prev.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + '.' + next;return currencyType + res}export {currency}（2）将这个filter.js文件引入main.js使其全局代码如下：import * as currency from './api/filter.js'Object.keys(currency).forEach(key=>{Vue.filter(key, currency[key])})（3）在页面中使用的代码如下：<el-table-column prop="money" label="金额" width="150"><template scope="scope"><span>{{scope.row.money|currency}}</span></template></el-table-column>
11.模拟get或者post获取json数据加载到页面中因为我们需要获取很多页面的数据，并且可能遇到很多的问题（404、500、504.。。）因此我们还需要定义一个全局拦截器（下一类再写）（1）配置vue.config.js文件var aa = require('./src/api/lanjie')   请求拦截器js文件module.exports = {publicPath:"/", outputDir:'dist', devServer:{ open:true, host:'127.0.0.1',  自己的ipport:'5000',   端口号（8000和6000常出错不建议使用）proxy:null,   代理服务器地址before(app){aa(app)     很重要的调用}}};（2）我们可能有很多页面的数据获取，所以建立一个单独的文件，我定义为json获取基地，专门放json数据自己模拟一个其中一个json数据，我的：{"code":200,      状态码200为成功"message":"成功", 提示信息"tableDataa":[     数据{"date": "2019-5-16","name": "鞠婧祎","type":"高端大气上档次","xinghao":"5484121511","province": "上海","xulie":"25","danwei":"元","money":"251514","company":"山西优逸客科技有限公司","bumen":"开发部","time":"56","men":"叶凡","guanli": "普陀区","address": "上海市普陀区金沙江路 1518 弄","zip": "200333","statuss":1,"years":"3"},]}（3）在页面中请求首先定义一个空的数组来放置获取到的数据，然后在页面中请求数据，放置到空数组中去1）比如定义一个空的数组tableData: [],2）在mounted中请求数据mounted() {this.$axios.get("/api/registration").then(res => {if (res.data.code == "200") {this.tableData = res.data.tableDataa;}});},（4）注意get（路径）此处的路径直接从src开始写，不用考虑当前文件与json文件的位置差vue.config.js里面的数据改一次就要重新运行一次项目，所以尽量不要在里面一直改。
12.全局拦截器在main.js中定义全局拦截器，具体代码如下，就这么写：axios.interceptors.response.use(         axios请求 （终于用到这个依赖了）response => {  判断条件  后面可以加很多种情况if(response.data.code == '500' || response.data.code == '404'){alert("没有获取到数据")    这里可以引入组件，交互效果会更好，比如圆圈一直在转。}else{return response;       一定要返回出去，这样页面中的请求才能接收到}},function(error){           请求错误的情况下return Promise.reject(error)})