Vue项目开发相关问题总结
1.创建一个项目（两种方式）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）等一会、嘿嘿，就创建好了。2.项目所需要的依赖 下载依赖位置---直接在界面左侧第三个依赖里面，安装依赖，一般所需要的依赖有 axios--->基于promise用于浏览器和node.js的http客户端（主要在请求时用到） v-charts、echarts--->表格图表时使用，两个都安装上，不会出错 element-ui--->组件库，自我感觉这个组件库很好，很容易上手 vue-router--->一般默认安装会没有这个依赖，手动添加一下（必须有）3.然后就开始我们的开发项目了 （1）打开项目创建的目录，会发现一堆东西，其实我们需要编辑的只有几个地方 网上目录结构很全（https://v.hnz.kim）里面的"vue开发"下面有目录结构， 一般用到最多的就是 components（放组件的） views（页面） App.vue （第一页放置区域入口区） main.js（入口js文件） router.js(路由加载) vue.config.js(配置文件，每修改一次，就要重新启动一次项目，很多默认创建会没有这个文件) assets（资源目录，放置图片、icon）4.登录页 （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，写相应的方法即可5.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）导航栏侧边栏当再有下一级时注意嵌套遍历，同时路由中也要再写子路由6.面包屑在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了7.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>8.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; },9.过滤器 可以设置一个局部的过滤器，也可以全局的，下面的是全局的，局部的很多地方都能查到，简单 （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>10.模拟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里面的数据改一次就要重新运行一次项目，所以尽量不要在里面一直改。11.全局拦截器 在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) } )