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) } )