Vue项目开发相关问题总结

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)

}

)