五、初始Vue-Cli、路由以及路由传参
姬衡
① 安装Vue-Cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli② 常用的插件Element-UI、Echarts、swiper安装和使用
1.Element-UI
安装
npm install element-ui导入（main.js文件）（全局导入）
import Vue from 'vue';
import ElementUI from 'element-ui'; // 导入element-ui组件库
import 'element-ui/lib/theme-chalk/index.css'; // 导入element-ui组件库的样式
import App from './App.vue';
Vue.use(ElementUI); // 注意：element-ui组件库，是一个插件，所有的插件都要由Vue去use
new Vue({
el: '#app',
render: h => h(App)
});2.Echarts
安装
npm install echarts --save引入 ECharts
<script>
import * as echarts from "echarts";
export default {
data() {
return {
// 用户接收后台返回的数据
list: [],
};
},
created() {
// 发送ajax请求，获取数据
this.list = [
{
name: "衬衫",
count: 5,
},
{
name: "羊毛衫",
count: 20,
},
{
name: "雪纺衫",
count: 36,
},
{
name: "裤子",
count: 10,
},
{
name: "鞋子",
count: 50,
},
];
},
mounted() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 绘制图表
myChart.setOption({
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: this.list.map((p) => p.name),
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: this.list.map((p) => p.count),
},
],
});
},
};
</script>3.swiper
低版本安装
npm install swiper@5 vue-awesome-swiper@4 --save全局导入（main.js文件）
import VueAwesomeSwiper from 'vue-awesome-swiper' // 导入swiper
import 'swiper/css/swiper.css' // 导入swiper的样式
Vue.use(VueAwesomeSwiper) // 因为swiper是插件，所以要use局部导入
import { swiper, swiperSlide } from 'vue-awesome-swiper' // 导入swiper的组件
import 'swiper/css/swiper.css' // 导入swiper的样式
export default {
// 注册组件
components: {
swiper,
swiperSlide,
}}使用
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide><img src="/image/banner1.jpg" /></swiper-slide>
<swiper-slide><img src="/image/banner2.jpg" /></swiper-slide>
<swiper-slide><img src="/image/banner3.jpg" /></swiper-slide>
<swiper-slide><img src="/image/banner4.jpg" /></swiper-slide>
<swiper-slide><img src="/image/banner5.jpg" /></swiper-slide>
<swiper-slide><img src="/image/banner6.jpg" /></swiper-slide>
<swiper-slide><img src="/image/banner7.jpg" /></swiper-slide>
<swiper-slide><img src="/image/banner8.jpg" /></swiper-slide>
<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-prev" slot="button-prev"></div>
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>data() {
return {
// 定义swiper的配置选项
swiperOptions: {
// 指定分页器
pagination: {
//指定分页器的容器
el: ".swiper-pagination",
//点击分页器的指示点分页器会控制Swiper切换
clickable:true
},
// 配置衔接滑动
loop:true,
// 配置自动播放
// autoplay:true
autoplay:{
//自动播放
autoplay:true,
//设置间隔时间
delay:3000,
// 用户操作swiper之后，是否禁止autoplay
disableOnInteraction:false
},
// slide的切换效果
effect:'coverflow',
// 箭头
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
},
};},③ 路由
1. 安装
npm install vue-router2. 导入
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)3. 创建路由器
import Index from '../pages/Index.vue' // 导入页面组件
export default new VueRouter({ // 创建一个路由器对象
//定义当前路由器对象管理的路由信息
routes:[
//每一条路由信息，需要配置一个对象
{
//路由路径
path:'/',
//路由名称
name:'Index'
//路由组件
component:Index
}
]
})4. 配置路由器
import router from './router' // 导入当前项目中创建的路由器对象
new Vue({
render: h => h(App),
// 在Vue的实例上，配置一个路由器对象
router
}).$mount('#app')5. 使用路由
5.1. 路由组件跳转
<!-- 路由链接，用于跳转路由，to属性设置路由路径 ,router-link会默认被渲染为a标签-->
<router-link to="/page1">到页面1</router-link>
<router-link to="/page2">到页面2</router-link>
<router-link to="/page3">到页面3</router-link>
<!-- 通过tag属性可以重新设置渲染后的标签类型但是在Vue-conter4已经被移除了，
vue推荐用插槽方法实现，但是这样就是在a标签里面嵌入按钮标签会增加结构复杂度-->
<!-- <router-link to="/page3" tag="button">到页面3</router-link> -->
<router-link to="/page3"> <button>到页面3</button> </router-link>
<button @click="toPage2">到页面2</button>
<button @click="toPage1">到页面1</button>
<!-- 路由视图，用于显示路由组件，当浏览器的地址栏中切换到指定的路由路径时，
就会在router-view中显示对应的路由组件。-->
<router-view></router-view>5.2. 编程式路由跳转
this.$router里面保存的是我们在vue实例上添加的路由器对象。
this.$route里面保存的是当前路由信息。
$router就是当前项目中的路由器对象，它的push方法，用于跳转路由。push方法是在浏览器的历
史记录中，添加一个路由信息。replace方法，也是用于跳转路由。replace方法是在浏览器的历史
记录中，替换前一条路由信息。
methods: {
toPage2() {
if (this.$route.path != "/page2") this.$router.push("/page2");
},
toPage1() {
if (this.$route.path != "/page1") this.$router.replace("/page1");
},
},6.路由传参
1. params 参数
路由配置
routes: [
//配置首页路由
{
path: '/',
component: () => import('@p/Home.vue')
},
//配置列表页路由
{
// 注意：这里的路由需要传一个参数，路由可以传多个参数
//设置路由参数 方法是 :xxx
path: '/list/:id',
// 设置该选项为true，组件可以通过props选项接收路由参数
props: true,
component: () => import('@p/List.vue')
},
{
path: '/list2',
component: () => import('@p/List2.vue')
},
//配置content路由
{
path: '/content',
//@是src的别名
component: () => import('@/pages/Content.vue')
}
]页面
<template>
<div>
<h2>首页</h2>
<h3>通过params和props方法传参</h3>
<ul>
<li v-for="(item, index) in types" :key="index">
<router-link :to="`/list/${item}`">{{ item }}</router-link>
<!-- 上面的to属性要添加绑定-->
</li>
</ul>
</div>
</template>组件
<script>
export default {
name: "List",
// 使用props选项接收路由参数
props: ["id"],
data() {
return {
goodList: [
{
type: "手机",
name: "小米手机",
},
{
type: "手机",
name: "三星手机",
},
{
type: "手机",
name: "苹果手机",
},
{
type: "手机",
name: "华为手机",
},
{
type: "数码",
name: "尼康相机",
},
{
type: "数码",
name: "索尼相机",
},
{
type: "数码",
name: "大疆相机",
},
{
type: "数码",
name: "佳能相机",
},
{
type: "百货",
name: "可狄",
},
{
type: "百货",
name: "奢吧",
},
{
type: "百货",
name: "柏登居",
},
{
type: "百货",
name: "天南兄弟",
},
{
type: "生鲜",
name: "安井",
},
{
type: "生鲜",
name: "思念",
},
{
type: "生鲜",
name: "广州酒家",
},
{
type: "生鲜",
name: "粮全其美",
},
],
// type: "",
};
},
computed: {
currentGoodes() {
if (this.id == "") {
return [];
} else {
return this.goodList.filter((g) => g.type == this.id);
}
},
},
// mounted() {
// // $route返回的是当前路由信息，它身上有一个params属性，该属性里面保存的是当前路由信息的参数。
// let {params: { id }} = this.$route;
// this.type = id;
// },
};
</script>2. query参数
<template>
<div>
<h3>通过query方法传参</h3>
<ul>
<!-- 路由地址，采用query传参方式：?参数1=XXX&参数2=XXX... -->
<li v-for="(item, index) in types" :key="index">
<router-link :to="`/list2?type=${item}`">{{ item }}</router-link>
<!-- 上面的to属性要添加绑定-->
</li>
</ul>
</div>
</template>组件
<script>
export default {
name: "List",
data() {
return {
goodList: [
{
type: "手机",
name: "小米手机",
},
{
type: "手机",
name: "三星手机",
},
{
type: "手机",
name: "苹果手机",
},
{
type: "手机",
name: "华为手机",
},
{
type: "数码",
name: "尼康相机",
},
{
type: "数码",
name: "索尼相机",
},
{
type: "数码",
name: "大疆相机",
},
{
type: "数码",
name: "佳能相机",
},
{
type: "百货",
name: "可狄",
},
{
type: "百货",
name: "奢吧",
},
{
type: "百货",
name: "柏登居",
},
{
type: "百货",
name: "天南兄弟",
},
{
type: "生鲜",
name: "安井",
},
{
type: "生鲜",
name: "思念",
},
{
type: "生鲜",
name: "广州酒家",
},
{
type: "生鲜",
name: "粮全其美",
},
],
type: "",
};
},
computed: {
currentGoodes() {
if (this.type == "") {
return [];
} else {
return this.goodList.filter((g) => g.type == this.type);
}
},
},
mounted() {
// 通过$route.query获取路由地址?后面的参数
let { query: { type }} = this.$route;
this.type = type;
},
};
</script>3. vue.config.js
//导入node.js的内置模块
let path = require('path')
// 注意：该配置文件中，只能使用commonjs模块化语法
module.exports = {
//是否在开发环境下使用eslint-looder做语法检查
lintOnSave: false,
//生成的生产环境构建文件的目录(打包文件存放的目录)，默认是dist,一般不需要更改
outputDir: 'dist',
//开发服务器设置
devServer: {
//设置开发服务器的端口号
port: 8848,
//开发服务器打开后，直接开启
open: true
},
//设置webpack的原始设置
configureWebpack: {
// 解析
resolve: {
//给一些常用的路径配置别名
alias: {
'@p': path.resolve(__dirname, 'src/pages'),
'@c': path.resolve(__dirname, 'src/components')
}
}
}
}
类似资料：