Vue开发文档资料.pdf

Vue开发⽂档

⼀.环境搭建

1.安装node.js

/zh-cn/

2.切换npm镜像

npminstall-gcnpm--registry=

3.vue-cli脚⼿架

npminstall-g@vue/cli//如果安装较慢可以使⽤cnpmi-g@vue/cli@3.3.

npmuninstallvue-cli-g//如果原来安装过vue-cli2先执⾏此命令

4.创建项⽬

a.命令⾏创建a.命令⾏创建

vuecreate项⽬名称

b.进⼊可视化页⾯进⾏项⽬搭建b.进⼊可视化页⾯进⾏项⽬搭建

vueui

5.启动项⽬

npmrunserve

⼆.项⽬搭建

1vue-r1vue-roouter

1.1vue-router安装

npminstallvue-router

1.2vue-router引⽤

importVuefromvue

importVueRouterfromvue-router

Vue.use(VueRouter)

2axios安装

2.1axios安装

npminstallaxios--save

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

npmivant-S

三.项⽬模块封装

1.项⽬结构模块（⾮初始模块，已做⼆次封装）

image.png

2.r2.roouteruter的路由的路由

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

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_I

this.Mst_ID=this.$route.query.Mst_I

3.详情页

data：进⾏变量定义

methods：执⾏⽅法

created：在实例创建完成后被⽴即调⽤⼀般⽤于数据初始化

在变量定义时，需注意传递的是⼀个数组还是对象

image.png

image.png

image.png

效果

image.png

image.png

PS

三个点（...）真名叫扩展运算符，是在ES6中新增加的内容，它可以在函数调⽤/数组构造时，将数组表达式或者string在语法层⾯展开；还可以在

构造字⾯量对象时将对象表达式按照key-value的⽅式展开

说⽩了就