Skip to main content

vue

Vue全家桶:vue vue-router pinia vite ts axios vant/element plus​

VUE 3​

1.ref    //操作的话需要加上.value
2.toRef  //重新定义ref
3.toRefs //重新定义ref对象

4.defineExpose // 组件中对外暴露的值 父取子的值
5.defineProps  // 父往子中传值 :salary-info 传参 

//路由 引入路由插件 vue-router
// 1.配置路由规则
import HomePage from "@/pages/HomePage.vue"
const routes = [
    {path:"/",redirect:"/home"}
    {path:"/home",component:HomePage}
]
// 2.创建路由器
const router + createRouter({
    history:createWebHistory(), // 路由工作模式
    routes
})
// 3.加载路由器
let app = createApp(App)
app.use(router)

// 路由链接 
//         <RouterLink to = "/path">index </RouterLink> 字符串跳转 
//         <RouterLink :to = "{path:/about}">index </RouterLink> 对象跳转
//         <RouterLink :to = "{path:name}">index </RouterLink> 具名跳转

// 路由出口
// <RouterView/>
app.mount('#app')


// Pinia 集中状态存储
// 创建store. 一个store可以理解为mysql中的一个库, state getter action 相当于MVC state是数据 getter是服务 action是controller 组织业务逻辑
// 单独创建一个文件夹
const pinia = cretePinia()
app.use(pinia)
// storeToRefs 进行双向绑定

// 路由传参 query params

// UI 框架
// https://www.uviewui.com
// https://nutui.jd.com
// https://tdesign.tencent.com
// https://www.naiveui.com/zh-CN/light
// https://www.antdv.com/docs/vue/getting-started-cn

ref reactive 区别​

ref reactive 区别
// ref 所有类型         reactive 引用类型 array object map set
// ref 需要加 .value    reactive 不需要
// reactive 不能直接赋值 因为是proxy 对象
// 解决方案 数组 push  或者 添加一个对象 把数组作为一个属性去解决

VUE 3 电影​

1.vue create db
// ? Please pick a preset: Manually select features
// ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
// ? Choose a version of Vue.js that you want to start the project with 3.x
// ? Use history mode for router? (Requires proper server setup for index fallback in production) No
// ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
// ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
// ? Save this as a preset for future projects? Yes
// ? Save preset as: 
2.npm i vant

3.npm install axios@1.2.6 -s

// -s 生产
// -d 开发
// -g 全局
4.localstorage

vue 医院​

1.npm init vite@latest pzadmin -- --template vue

2.npm install vue-router@4

3.npm install element-plus
//按需导入
//npm install -D unplugin-vue-components unplugin-auto-import

//H5
1.npm init vite@latest pzadmin -- --template vue

2.npm install vue-router@4

3.npm i vant
//npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import

未来使用​

npm create vue@latest