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 = echarts
Vue.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传给Del
del(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', 自己的ip
port:'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)
}
)