王哆啦的自留地 - vue
type: channel
link: https://www.wangduola.com/tag/vue/
items: vue3第五课：定义路由及模块
items: vue3第四课：引入全局样式
items: vue3第三课：定义@根目录
items: vue3第二课：vue引入vue-router
items: vue3第一课：vite构建vue项目

vue3第五课：定义路由及模块
type: item
date: 2024-02-06T01:15:00+08:00
description: 分不太清vue里面的模块及模板的概念。姑且就这么叫吧。这里是照着知乎登录及首页来布局的。1 分析及创建模块具体可以参考知乎登录页和首页这里进行了模块划分在src目录下建立相应的views模块2 配置路由路由的路径/src/router/index.js代码如下：// router/index.js import { createRouter, createWebHistory } from 'vue-router' import index from '../views/index/index.vue' import login from '../views/login/login.vue' import school from '../views/school/index.vue' import find from '../views/find/index.vue' import waiting from '../views/waiting/index.vue' import follow from '../views/index/follow/index.vue' import recommend from '../views/index/recommend/index.vue' import video from '../views/index/video/index.vue' import hotlist from '../views/index/hotlist/index.vue' const routes = [ { path: '/', component: index }, { path: '/login', component: login }, { path: '/index', component: index, children:[ { path: 'follow', component: follow }, { path: 'hotlist', component: hotlist }, { path: 'video', component: video }, { path: 'recommend', component: recommend }, ] }, { path: '/school', component: school }, { path: '/find', component: find }, { path: '/waiting', component: waiting }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router需要注意的是子路由的配置。3 路由的引用要确保路由已经引用。打开main.js，代码如下：import { createApp } from 'vue' import './style.css' import App from './App.vue' import router from "./router" createApp(App).use(router).mount('#app') 4 组件的渲染在Vue 组件中，使用<router-link>来导航到你的路由，并使用 来显示当前路由的组件。根组件就是App.vue，所以先把App.vue里的东西清一下。并加入 标签App.vue代码如下 5 子路由组件的渲染正如上条，子路由组件的渲染，需要上一层级组件中包含 来确定渲染的位置。首页/index 下有关注/热门/推荐/视频四个子组件，那么需要在views/index/index.vue中加入 index 这样在访问地址/index/follow后，就能将views/index/follow/index.vue中的内容渲染出来。你也看到了，真JB烦人。以前搞jquery+bootstrap是多么容易理解。也不知道是进步还是退步。知乎登录 知乎首页

vue3第四课：引入全局样式
type: item
date: 2024-02-06T00:01:25+08:00
description: 1 打开main.js进行编辑import { createApp } from 'vue' import './style.css' import App from './App.vue' import router from "./router" //全局引用样式 //引入根目录/src/assets/css中的样式文件 import '@/assets/css/common.css' import '@/assets/css/index.css' createApp(App).use(router).mount('#app')

vue3第三课：定义@根目录
type: item
date: 2024-02-05T03:09:16+08:00
description: vue2里默认定义@为根目录，vue3里则需要自己配置。配置如下。打开vite.config.js首先需要引用node中path组件import path from 'path'import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server:{ open:true, port:5176 }, resolve:{ alias:{ '@':path.resolve(__dirname,'src') } } })

vue3第二课：vue引入vue-router
type: item
date: 2024-02-05T02:47:00+08:00
description: 1 添加依赖在项目目录下（在vscode终端运行）npm install vue-router -S运行完成后，会在项目目录package.json中dependencies看到'vue-router'2 创建路由文件在项目里创建（vscode里也可以）/src/router/index.js在src/router/index.js里输入以下代码import { createRouter, createWebHashHistory } from "vue-router" const routes = [ { path:'/index', name:'Home', component: ()=>import('../views/index/index.vue') } ] const router = createRouter({ history:createWebHashHistory(), routes:routes }) export default router看不懂就先抄啊，前端一统天下，不要问太仔细。引入路由文件编辑main.js，添加import ,添加useimport { createApp } from 'vue' import './style.css' import App from './App.vue' import router from "./router" createApp(App).use(router).mount('#app') 这里跟着JB视频学的时候没有讲清楚，/src/router/index.js 里 component 运行时会报错，直接略过看第五课的记录。

vue3第一课：vite构建vue项目
type: item
date: 2024-02-05T02:05:00+08:00
description: 你知道的，世道变了，不学不行了。视频地址：https://www.bilibili.com/video/BV155411C7NP1 cmd打开到需要创建项目的目录2 输入命令npm init vite如果没有安装vite，直接确认，自动安装。3 配置project_name项目名称，填写后会自动创建项目文件夹。select a frameword 选择一个框架，自行选。select a variant 需不需要支持typescript,刚开始学，选javascript4 运行项目已创建完成，需要打开项目目录cd vite_project npm install #安装依赖 npm run dev依次执行，上面的命令浏览器打开local地址