vite和vue-cli一样,都是脚手架。
PS E:\vuecode\vite1> node -v
v18.12.1
yarn是一个包管理工具,也是一个构建、打包工具
yarn需要借助npm进行安装:执行的命令行npm install -g yarn。
yarn的优点:
1.安装速度快:因为yarn缓存每一个下载过的包,所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率,因此安装速度更快。
2.安全性较高: 在执行代码之前,yarn会通过算法校验每个安装包的完整性。这个是npm所没有的
3.可靠性强: 使用详细,间接的锁文件格式和明确的安装算法,yarn能够保证在不同系统上无差异的工作
E:\vuecode\vite1>npm install -g yarn
E:\vuecode\vite1>yarn -v
1.22.21
本地安装,本地安装就是安装包只在项目内生效
yarn add 包名
相当于
npm install 包名
yarn global add 包名
相当于
npm -g install 包名
安装package.json里所有包
yarn install
yarn config set registry https://registry.npm.taobao.org
yarn global remove 包
pnpm是npm和yarn的新一代替代工具,vite的官网也建议使用pnpm来安装vite
使用npm的前提是 node的版本需要大于12版本
npm -g install pnpm
注意:这里的create vite中的vite不是项目名称,而是创建vite项目
pnpm create vite
如果会使用TS,那么就选择TS
cd 项目中
#安装所有依赖
pnpm install
#启动项目
pnpm run dev
单个 ue文件分为3部分
编写html
简单实例
{{ name }}
上边说过了 setup中必须要有return返回数据,模板中才能用,如果有大量的数据,每一个都要返回,这样很繁琐,也很容易遗漏,所有有了语法糖。语法如下
{{ name }}
注意:两端script的lang的值必须一致,否则报错。
注意:这里的ref和vue3中的 "响应式"ref函数不是一回事。
ref和id一样都是为了定义html元素,为了DOM操作。但是范围不一样。id是整个项目生效,ref是组件内生效。
hello
其实在前边的博客文档中已经详解讲过了,这里在写一下
目录结构
1.node_modules: 模块安装目录,下载安装的第三方模块会存放在这里
2.public: 公共资源目录
3.src: 主要存放代码的目录
-- assets 静态资源目录
-- components 公共组件目录
-- router 路由目录 #自定义创建目录
-- store 状态管理目录(vuex) #自定义创建目录
-- views 页面组件目录 #自定义创建目录
-- App.vue "根"组件文件
-- main.js 项目入口文件
4.index.html 用户访问入口文件
这里选择的是局部安装。包不是全局的,只是安装在了这个项目当中
E:\vuecode\vite_project1>pnpm install vue-router
查看vue-router安装版本,或者查看packages.json文件。
E:\vuecode\vite_project1>pnpm ls |findstr /i router
vue-router 4.2.5
在src/下创建 router目录,然后创建index.js。内容如下
import { createRouter,createWebHashHistory } from 'vue-router'
const routes = [
// 在这里设置路由,这里暂时没有写路由,只是先把格式写在这里
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
import { createApp } from 'vue'
import App from './App.vue'
//这里引入了刚才创建的js文件,因为文件名称是index.js,所有只写目录名称即可,如果js文件不是index 则需要把文件名写全
import router from './router'
//这里做了调整,默认格式并不是这样,修改的目的是为了引入UI组件的时候更好操作
const app = createApp(App).use(router)
app.mount('#app')
在传统的html中,会有很多的html文件,通过"“标签在多个html文件中进行调整,这个跳转是静态文件级别之间的跳转。
而在vue框架中并不是这样的,vue是单文件组件开发,所有的链接跳转,不是发生在多个静态html文件之间的跳转。从上边的的项目关系图中也能看出,用户访问的始终是index.html这一个静态文件。所有的跳转都是发生在了index.html这一个文件当中。那么vue是怎么在一个文件中发生的路由跳转呢?
这就是要说的vue的"路由出口” 。
路由出口的本质就是: 显示子组件的地方
这里以一个小实例来验证上边的示意图
创建src/views文件夹,创建组件Home.vue和Login.vue
Home.vue文件
Home.vue文件
编辑App.vue文件,增加子组件的的路由出口(也就是在哪里显示)
App.vue文件
编辑main.js文件,并编写路由规则
import { createRouter,createWebHashHistory } from 'vue-router'
//引入两个自定义组件
import Login from "../views/Login.vue"
import Home from "../views/Home.vue"
const routes = [
// 路由规则
{ path: "/",redirect: "/login" },
{ path: "/login",component: Login },
{ path: "/home",component: Home },
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
import { createApp } from 'vue'
import App from './App.vue'
// 引入路由文件
import router from './router'
// 使用路由文件
const app = createApp(App).use(router)
app.mount('#app')
在浏览器分别访问/home和/login ,发现结果如下
App.vue文件
Home.vue文件
和
App.vue文件
Login.vue文件
路由切换过程中,App.vue文件内容没有变,Home和Login组件内容在App.vue不断变化,这说明子组件都是在App.vue的路由出口中来回切换。
组件关系图如下:
在views目录下创建Home_clidren目录,存放Home.vue组件的子组件
cart.vue文件
host.vue文件
在Home.vue中添加Home组件的子组件路由出口
Home.vue文件
编辑index.js
import { createRouter,createWebHashHistory } from 'vue-router'
//引入两个自定义组件
import Login from "../views/Login.vue"
import Home from "../views/Home.vue"
import Host from "../views/Home_children/Host.vue"
import Cart from "../views/Home_children/cart.vue"
const routes = [
// 编写路由规则
{ path: "/",redirect: "/login" },
{ path: "/login",component: Login },
{ path: "/home",component: Home,
// home组件的子路由
children: [
{ path: "host",component: Host},
{ path: "cart",component: Cart},
]
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
在浏览器访问/home/host和/home/cart 可以看到
Home.vue文件
host.vue文件
和
Home.vue文件
cart.vue文件
上边的基本路由和路由嵌套都是 需要在浏览器中手动输入路由地址才能切换。这样就项目中肯定是不行的。
项目中肯定是 点击 某个图标或者链接就可以跳转路由。这时候就用到了router-link
Map.vue组件
我是地图首页
Music.vue组件
我是音乐主页
News.vue组件
我是新闻主页
router/index.js
import { createRouter,createWebHashHistory } from 'vue-router'
//引入两个自定义组件
import Map from '../views/Map.vue'
import Music from '../views/Music.vue'
import News from '../views/News.vue'
const routes = [
// 编写路由规则
{ path : "/music",component: Music },
{ path : "/map",component: Map },
{ path : "/News",component: News },
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
App.vue
新闻
地图
音乐
点击相应的链接就会显示对应的路由页面
VUE有两种工作模式:
history模式: url种不带#号 ,比较美观,但是需要在nginx 使用try_file 参数来处理路径。一般适用于业务。
用法:编辑router/index.js
import { createRouter,createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes
})
hash模式:url中带#, 兼容性好,适用于后台管理系统.
import { createRouter,createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes
})
这种是根据路由的路径跳转
<span><router-link :to="{path: '/news'}">新闻router-link>span>
这种是根据路由的名字跳转
<span><router-link :to="{name: 'map'}">地图router-link>span>
编程式路由时路由要比router-link使用的频率还要高,比如:用户登录的时候成功的时候,就会自动跳转到管理页面,这时候用的就是编程式路由
语法非常简单
<template>
<div>
<button @click="test">新闻</button>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function test(){
router.push('/news')
}
</script>
每次发生路由的导航跳转时,都会触发全局前置守卫。
语法如下:编辑router/index.js
const router = createRouter({
history: createWebHashHistory(),
routes
})
只要增加上这个路由守卫,即使,函数中什么都不写,所有的路由都不能访问。相当于默认策略是拒绝。
router.beforeEach((to,from,next)=>{
})
to: 要跳转到哪里
from: 从哪里跳转过来的
next函数: ,默认是放行,参数还可以传递指定的路由url
router.beforeEach((to,from,next) => {
#如果访问是login页面直放行。
if(to.path === '/login') next()
#获取token
const tokenstr = window.sessionStorage.getItem('token')
#根据结果判定是否放行
if (!tokenstr){
next('/login')
}else{
next()
}
})
1.专门为vue.js设计的状态(数据)管理库
2.采用集中式的方式存储需要的共享的状态
3.vuex的作用是进行状态管理,解决复杂的组件通信,数据共享问题
pnpm install vuex
查看安装后的版本
E:\vuecode\vite_project1>pnpm list |findstr /i vuex
vuex 4.1.0
在src/store/index.js 就是vuex的文件
import { createStore } from 'vuex'
export default createStore({
//数据仓库,所有的数据都定义在state当中
state: {
},
//类似于组件中的计算属性,监视state中的数据,一旦数据发生变化就开始运行
getters: {
},
//同步调用
mutations: {
},
//异步调用
actions: {
},
modules: {
}
})
main.js中引入vuex
import store from './store'
//使用vuex,这里注意导入的时候 必须叫store,否则使用不了
const app = createApp(App).use(router).use(store)
import { createStore } from 'vuex'
export default createStore({
state: {
//定义一个变量
username: "zhangsan"
}
})
hello: {{ $store.state.username }}
在getters中定义函数
import { createStore } from 'vuex'
export default createStore({
state: {
//定义一个基本数据
username: "zhangsan"
},
getters: {
//对username数据进行二次处理,每一个处理函数都需要将state作为参数传递过来
newusername(state){
return state.username + "您好"
}
}
})
我是登录页面
{{ $store.state.username }}
{{ $store.getters.newusername }}
这里介绍ant design组件是因为它还支持JS代码,而element-plush全部是TS代码,增加学习成本,所有就不考虑了。
所以这里使用 ant-design-vue
安装 “ant design” UI组件库,官网如下:
https://www.antdv.com/docs/vue/getting-started-cn
$ pnpm install ant-design-vue
查看版本
E:\vuecode\vite_project1>pnpm ls |findstr /i ant
ant-design-vue 4.1.0
在main.js中引入ant
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ant from 'ant-design-vue'
const app = createApp(App).use(router)
app.use(ant)
app.mount('#app')
官网链接:
https://www.antdv.com/components/button-cn
代码如下:
登录
pnpm install @ant-design/icons-vue
#指定淘宝源
pnpm install @ant-design/icons-vue --registry https://registry.npm.taobao.org