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