介绍
vue-cli脚手架是 Vue.js项目的官方脚手架,基于 Node.js与 Webpack构建,用于快速生成Vue工程化项目的工具。 它具有以下特点:
- 开箱即用:
提供了一套完整的项目结构和配置,减少了手动配置的工作量。
- 基于Webpack:
利用Webpack的资源打包和优化功能,提高项目的性能和稳定性。
- 功能丰富且易于扩展:
支持创建Vue2和Vue3的项目,提供了丰富的功能和插件系统,便于定制和扩展。
- 支持命令行操作:
通过命令行接口(CLI)进行项目创建和管理,提升了开发效率。
具体的代码在C:\Users\Administrator、
主要介绍一些功能的实现方法:
导航栏的实现:
<template>
<div class="nav">
<!-- 导航栏:点击对应列表项通过路由跳转 -->
<ul>
<li v-for="(value,index) in nararr" :key="index">
<router-link :to="value.url" >{{value.name}}
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name:"NavDemo",
data(){
return{
nararr:[
{name:"首页",url:"/home"},
{name:"MV",url:"/mv"},
{name:"热门歌手",url:"/hot"},
]
}
}
}
这里的导航都是通过路由进行跳转的
路由是在router/index.js中进行配置的,这个要新建一个
导入路由的方式
在mian.js中
import Vue from 'vue'
import App from './App.vue'
// 导入路由
import router from "./router/index"
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
这里是在main.js中写的。后面是导入模块的地址,前面是起的别名。
在route/index.js中
这里写具体的路径,还有各种导入的模块。
// 导入Vue
import Vue from "vue";
// 导入路由
import VueRouter from "vue-router";
// 使用路由
Vue.use(VueRouter)
// 导入所有通过路由跳转的组件
import HomeDemo from "@/components/home/HomeDemo.vue";
const router = new VueRouter({
routes:[
{path:"/",component:HomeDemo},
{path:"/home",component:HomeDemo},
]
})
// 默认导出路由
export default router
导入组件的方式
<script>
// 导入组件
import TopDemo from './TopDemo.vue';
export default {
name: "HomeDemo",
data(){
return{}
},
//注册成子组件
components: {
TopDemo,
}
}
</script>
在script中导入组件,都是导入子组件,路径是组件的路径,名字命名一样就好。
保存公共数据的方法
首先,在我的电脑中,veu-cli路径中的这个添加文件夹mixin,
// mixin混入:保存公共数据;可以定义多个mixin
// 导出mixin
export const mixin1 = {
data(){
return{
index:0
}
},
methods:{
clickli(i){
this.arr[this.index].state = false;
this.index = i;
this.arr[i].state = true;
}
}
}
组件中mixin使用的地方
这里是在首页上面导航栏的部分使用mixin来存储数据
下面导航栏也一样
<script>
// 导入mixin混入
import { mixin1 } from '../../mixin/index';
export default {
name:"TopDemo",
data(){
return{
arr:[
{title:"首页",state:true},
{title:"天猫",state:false},
{title:"淘宝",state:false},
{title:"京东",state:false}
],
}
},
// 使用mixin
mixins:[mixin1],
methods:{
}
}
</script>