vue-cli(一)

介绍

vue-cli脚手架是‌ Vue.js项目的官方脚手架,基于‌ Node.js与‌ Webpack构建,用于快速生成Vue工程化项目的工具。 它具有以下特点:

  1. 开箱即用

提供了一套完整的项目结构和配置,减少了手动配置的工作量。

  1. 基于Webpack

利用Webpack的资源打包和优化功能,提高项目的性能和稳定性。

  1. 功能丰富且易于扩展

支持创建Vue2和Vue3的项目,提供了丰富的功能和插件系统,便于定制和扩展。

  1. 支持命令行操作

通过命令行接口(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>
相关推荐
程序员爱技术9 分钟前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js