Vue开发文档

一.环境搭建

1.安装node.js

https://nodejs.org/zh-cn/

2.切换npm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.vue-cli脚手架

npm install -g @vue/cli   //如果安装较慢 可以使用 cnpm i -g @vue/[email protected]

npm uninstall vue-cli -g //如果原来安装过vue-cli2先执行此命令

4.创建项目

a. 命令行创建

vue create 项目名称

b. 进入可视化页面进行项目搭建

vue ui

5.启动项目

npm run serve

二.项目搭建

1vue-router

1.1 vue-router安装

npm install vue-router

1.2 vue-router引用

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2 axios安装

2.1 axios安装

npm install axios --save

3 vant安装(组件使用根据具体情况选择)

npm i vant -S

三.项目模块封装

1.项目结构模块（非初始模块，已做二次封装）

image.png

2.router的路由

每个路由应该映射一个组件

image.png

四.页面渲染

1.列表页

data：进行变量定义
methods：执行方法
created：在实例创建完成后被立即调用 一般用于数据初始化
列表页用过v-for对list进行遍历，用模板语法来声明式地将数据渲染

image.png

效果

image.png

2.动态路由匹配

从列表页到详情页是动态路由跳转，需要传递一个参数来获取不同项目的详情内容，此项目主要采用this.$router.push方法

//列表页点击a标签调用此方法
   toInfo(Mst_ID) {
      if(Mst_ID != "") {
        this.$router.push({
          path: 'nzxmInfo',
          query: {
            Mst_ID: Mst_ID,
          }
        })
      }
    },
//详情页在使用创建完成后获取路由实例来获取Mst_ID
 this.Mst_ID =  this.$route.query.Mst_ID

3.详情页

data：进行变量定义
methods：执行方法
created：在实例创建完成后被立即调用 一般用于数据初始化
在变量定义时，需注意传递的是一个数组还是对象

image.png

image.png

image.png

效果

image.png

image.png

PS

三个点（...）真名叫扩展运算符，是在ES6中新增加的内容，它可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开
说白了就是把衣服脱了，不管是大括号（[]）、花括号（{}），统统不在话下，全部脱掉脱掉！

//数组的合并
var arr1 = ['hello']
var arr2 =['chuichui']
var mergeArr = [...arr1,...arr2]
mergeArr  // ['hello','chuichui']
// 对象分合并
var obj1 = {name:'chuichui'}
var obj2 = {height:176}
var mergeObj = {...obj1,...obj2}
mergeObj // {name: "chuichui", height: 176}