vue-2

vue-cli的安装

vue-cli是一个脚手架工具,它集成了诸多前端技术,包括但不仅限于:

webpackbabeleslinthttp-proxy-middlewaretypescriptcss pre-prosessorcss module、...

这些工具,他们大部分都要依赖两个东西:

  • node环境:很多工具的运行环境
  • npm:包管理器,用于下载各种第三方库

安装node

下载node:https://nodejs.org/zh-cn/

bash 复制代码
# 打开终端,查看node和npm版本,验证是否安装成功:
node -v
npm -v

配置源地址

默认情况下,npm安装包时会从国外的地址下载,速度很慢,容易导致安装失败,因此需要先配置npm的源地址

使用下面的命令更改npm的源地址为淘宝源

bash 复制代码
npm config set registry http://registry.npm.taobao.org/
# 更改好了之后,查看源地址是否正确的被更改
npm config get registry

安装vue-cli

bash 复制代码
npm install -g @vue/cli
# 安装好之后,检查`vue-cli`是否安装成功
vue --version

新建 vue 项目

新建个文件夹并在此文件夹下执行

bash 复制代码
vue create 工程名

注意:工程名只能出现英文、数字和短横线

选择第三个手动

引入路由

路由安装

bash 复制代码
npm i vue-router@^3.5.1 -s 

如果先安装了高版本的,再执行上面的命令好像还是高版本,这时候可以把 package-lock.json 文件删除,并在 package.json 文件手动修改路由的版本为 3.5.1 修改之后下面会有波浪线,鼠标放上去会提示安装

建立 index.js 文件

新建 router 文件夹 里面新建 index.js

js 复制代码
import Vue from 'vue';
import VueRouter from "vue-router";
import Main from '@/components/Main.vue';

Vue.use(VueRouter);

export default new VueRouter({
    //tips:不想要 #(锚点)就添加下面代码
    mode:'history',
    routes: [
        {
            path: '/main',
            name: 'main',
            component: Main // 使用 Main 组件作为此路由的视图
        },
        // 其他路由...
    ]
});

main.js 中引入路由

js 复制代码
//这种直接写 vue 没有写.或者..的形式,一般是从 node_modules 中找
import Vue from 'vue'
import App from './App.vue'
import router from '@/router';
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

路由的使用

路由的使用,去掉了样式

<span class="name" @click="toDetail(data)">{{ data.cname }}

this.$router.push({})

js 复制代码
<template>
  <div class="channel">
    <!--Item组件接收一个名为isActive的prop,用来表示该项是否处于激活状态。-->
    <!--同时,当Item组件触发active事件时,会通过$emit方法向上层组件发送一个名为active的自定义事件。-->
    <Item :isActive="isActive" @active="$emit('active')">
      <div class="inner">
        <span class="name" @click="toDetail(data)">{{ data.cname }}</span>
        <span class="number">{{ data.glist.length }}</span>
      </div>
    </Item>
  </div>
</template>
<script>
import Item from "@/components/Item.vue";

export default {
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  components: {
    Item
  },
  methods: {
    async toDetail(data) {
      if (data && data.glist && Array.isArray(data.glist)) {
        // let names = data.glist.map(item => item.tools[0].title);
        let names = data.glist[0].tools.map(item => item.title);
        console.log(names)//names = ["工具1", "工具2", "工具3"]
        await this.$router.push({
          name: 'main',
          query: {
            detail: names
          }
        });
      } else {
        console.log(data.cname)
        console.error('Data or glist is not in the expected format.');
      }
    }
  }
}
</script>

路由参数接收

js 复制代码
<script>
export default {
  data() {
    return {
      detail: '初始内容',
    }
  },
  created() {
    // ["工具1", "工具2", "工具3"]
    this.detail = this.$route.query.detail;
  },
  watch: {
    '$route.query.detail': {
      immediate: true, // 确保在初始加载时也执行
      handler(newDetail) {
        this.detail = newDetail;
      },
    },
  }
}
</script>

引入 ElementUI

官网:https://element.eleme.cn/#/zh-CN/component/quickstart

安装

bash 复制代码
npm i element-ui -S

main.js 使用

js 复制代码
import Vue from 'vue'
import App from './App.vue'
import router from '@/router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

然后就可以在 vue 页面使用了

例子:

相关推荐
PandaCave3 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟5 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾27 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧35 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng18401 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
游走于计算机中摆烂的1 小时前
启动前后端分离项目笔记
java·vue.js·笔记
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue