vue3-学习笔记

安装创建项目

1,使用VueCLI创建项目

#安装Vue CLI
npm install -g @vue/cli

#创建vue项目
vue create my_vue


#配置项目
(*) Babel		-JS 编译器
( ) TypeScript	-TS支持
(*) Progressive Web App (PWA) Support	-PWA支持:离线访问、快速加载...
( ) Router		-官方路由管理器
( ) Vuex		-官方状态管理库
( ) CSS Pre-processors	-CSS预处理器
( ) Linter / Formatter	-代码规范检查/格式化工具
( ) Unit Testing		-单元测试工具
( ) E2E Testing			-端到端测试工具


#cd到项目
cd my_vue

#运行项目
npm run serve

2,使用create-vue创建项目

npm init vue@latest


# ...按照提示配置...略


#cd到项目
cd my_vue_project

#安装依赖
npm install

#运行项目
npm run dev

3,使用vite构建项目：

npm create vite@latest project_name
#指定模板构建
npm create vite@latest project_name --template vue
npm create vite@latest project_name --template vue-ts
# npm 7+, 需要额外加 --:
npm create vite@latest project_name -- --template vue


# ...按照提示配置...略

#cd到项目
cd project_name

#安装依赖
npm install

#运行项目
npm run dev

组合式API

setup钩子函数

使用ref或reactive创建响应式数据/函数

<script>
//导入ref,reactive
import {ref, reactive} from "vue";
export default {
  //创建setup钩子函数
  setup() {
    const date1=ref("value1");
    const date2=reactive({v:"value2"});

	//创建方法set
    function set(){
      //ref-通过date1.value修改数据
      date1.value+="-new";
      //reactive-直接访问修改数据
      date2.v+="-new"
    }

    //setup内返回创建的数据/函数
    return{
      date1,
      date2,
      set
    }
  },
}
</script>

使用props和context

setup中没有this关键字,可在钩子函数中定义传参props,context即可使内部访问

export default {
  props:{
      msg:String,
  },
  setup(props,context){
    console.log(`传入的msg为:${props.msg}`);

    //获取传入的当前实例对象
    console.log(context);
  }
}

setup内使用生命周期

<script>
//引入生命周期
import {
  onBeforeMount, onMounted,
  onBeforeUpdate,onUpdated,
  onBeforeUnmount,onUnmounted  
} from "vue";

export default {
  setup(p,c){
    //beforeMount
    onBeforeMount(()=>{});
    //mounted
    onMounted(()=>{});
    onMounted(()=>{});//可使用多个

    //beforeUpdate
    onBeforeUpdate(()=>{});
    //update
    onUpdated(()=>{});

    //beforeUnmount
    onBeforeUnmount(()=>{});
    //unmounted
    onUnmounted(()=>{});
  }
}
</script>

provide/inject嵌套组件之间传递数据

<script>
//引用inject,provide
import {inject, provide} from "vue";
export default {
  setup(){
    provide("key","value");//向下传递数据
    inject("key")//向上引用数据
  }
}
</script>

<script>结构体-组合式

<script>
import {
  //引入ref,reactive
  ref,reactive,
  //引入生命周期
  onBeforeMount,onMounted,
  onBeforeUpdate,onUpdated,
  onBeforeUnmount,onUnmounted,
  //引入provide, inject
  provide, inject
} from "vue";
//引入组件
import Item from "@/路径";

export default {
  name:"helloWorld",
  //注入组件
  components: {Item},

  //接收上级标签传值
  props:{
      msg:String,
  },

  //创建setup钩子函数
  //传入props,context对象,供props内部访问
  setup(props,context) {
    //创建数据
    const date1=ref("value1");
    const date2=reactive({v:"value2"});

    //创建方法
    function set(){
      //ref-通过date1.value修改数据
      date1.value+="-new";
      //reactive-直接访问修改数据
      date2.v+="-new";
    }

    //引用props上级传值 和自身的context示例对象
    function get(){
      const msg =props.msg;//使用props
      console.log(`传入的msg为:${msg}`);
      //获取传入的当前实例对象
      console.log(context);
    }

    //使用生命周期
    //beforeMount
    onBeforeMount(()=>{});
    //mounted
    onMounted(()=>{console.log("Mounted1")});
    onMounted(()=>{console.log("Mounted2")});//同周期可创建多个

    //beforeUpdate
    onBeforeUpdate(()=>{});
    //update
    onUpdated(()=>{});

    //beforeUnmount
    onBeforeUnmount(()=>{});
    //unmounted
    onUnmounted(()=>{});

    //数据传递
    provide("key","value");//向下组件树注入依赖数据
    inject("key");//向上组件树引用依赖数据

    //函数内返回创建的响应数据
    return{
      date1,
      date2,
      set,
      get
    }
  },
}
</script>

Axios网络请求

安装使用

npm install --save axios

局部引入

import axios from "axios"

全局引入

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import "./registerServiceWorker"

import axios from "axios";//引入axios


const app = createApp(App);
app.config.globalProperties.$axios=axios;//全局挂载axios
app.mount('#app');


//使用示例
    this.$axios.get("url").then((res) => {
      console.log(res.data)
    })

使用示例

	//get示例
    axios({
      method:"get",
      url:"/checktime?otype=json"
    }).then((res)=>{
      console.log(res.data);
    })

	//post示例
    axios({
      method:"post",
      url:"/checktime?otype=json",
      data:JSON.stringify({})
    }).then((res)=>{
      console.log(res.data)
    })

    //get快捷方式
    axios.get("/checktime?otype=json").then((res) => {
      console.log(res.data)
    })
    
    //post快捷写法
    axios.post("/checktime?otype=json",JSON.stringify({})).then((res) => {
      console.log(res.data)
    })

axios封装

封装路径src/utils/http.js

//引入axios
import axios from "axios";

//创建+配置 公共axios
const instance = axios.create(
    {
        timeout: 10000,//超时时间
    }
)

//请求拦截器
instance.interceptors.request.use(
    //请求成功拦截器
    (config)=>{
        if (config.method==="post"){
            config.data = JSON.stringify(config.data);
        }
        return config
    },
    //请求失败拦截器
    (error) => Promise.reject(error)
)

//Promise.resolve(res)

//响应拦截器
instance.interceptors.response.use(
    //响应成功拦截器
    (res)=>{
        res.status === 200 ? Promise.resolve(res) :Promise.reject(res)
    },
    //响应失败拦截器
    (error)=>{
        const {res}=error;
        errorHandle(res.status,res.info);//调用错误处理
    }
)

//处理错误
const errorHandle = (status,info)=>{
    switch (status) {
        case 400:
            console.log("语义有误")
            break;
        case 401:
            console.log("认证失败")
            break;
        default:
            console.log(`其他未定义错误:${status}-${info}`)
            break;
    }
}

//导出instance
export default instance;

使用封装的axios

集合使用

1,api配置封装:src/api/config.js

const baseApi="http://api.jie-you.cn";

const api={
    login:`${baseApi}/login`,
    register:`${baseApi}/register`,
}

export default api;

2,api调用封装:src/api/userApi.js

//引入封装好的axios
import axios from "../utils/http";

//引入API配置
import apiPath from "./config";

const userApi ={
    login(){
        return axios.get(apiPath.login);
    },
    register(data){
        return axios.post(apiPath.register,data);
    }
}

export default userApi;

3,调用接口

//导入接口
import userApi from "@/api/userApi";

export default {
  mounted() {
    userApi.login().then((res) => {
      console.log(res.data);
    })
    userApi.register({user: "123", pass: "123"}).then((res) => {
      console.log(res.data);
    })
  }
}

网络请求跨域

JS采取的是同源策略。同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名,端口,协议相同的数据接口上的数据，这就是同源策略。也就是说:当协议,域名,端口任意一个不相同时都会产生跨域问题

解决方案

1:后台解决:cors(略)

2,前台解决:proxy

// vue.config.js
const {defineConfig} = require('@vue/cli-service')

module.exports = defineConfig({
    transpileDependencies: true,
	//配置proxy 配置完后需要重启vue serve
    devServer:{
        proxy:{
            '/checktime':{//代理的路径
                target:'http://vv.video.qq.com/',//代理的目标地址
                changeOrigin:true//启用
            }
        }
    },
})

Pinia 状态管理

Vue3加载Element-plus组件库

组件地址 https://element-plus.org/zh-CN/

1,安装Element-plus

npm install element-plus --sava

2,导入Element-plus库

导入完整库

// main.js |main.ts
import { createApp } from 'vue'
import App from './App.vue'

//引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)//使用
app.mount('#app')

按需导入

首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

vite配置自动导入

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

Webpack配置自动导入

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

Vue CLI配置自动导入

// vue.config.js
const {defineConfig} = require('@vue/cli-service')

//引入
const {ElementPlusResolver} = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
    transpileDependencies: true,

    //配置
    configureWebpack: {
        plugins: [
            require('unplugin-vue-components/webpack').default({resolvers: [ElementPlusResolver()],}),
            require('unplugin-auto-import/webpack').default({resolvers: [ElementPlusResolver()],}),
        ],
    }
})

Vue3加载Element-plus的字体图标

1,安装字体图标

npm install @element-plus/icons-vue

2,全局注册

• 1,在项目根目录src下创建plugins文件夹,在文件夹下创建icons.js文件

//  - src/plugins/icons.js
import * as components  from "@element-plus/icons-vue"

export default {
    install:(app)=>{
        for(const key in components){
            const componentConfig=components[key];
            app.component(componentConfig.name,componentConfig);
        }
    }
}

• 2,在main.js文件中引入icons.js

//...
import elementIcon from "./plugins/icons"

//...
app.use(elementIcon);
//...

安装使用Sass预处理器

npm install sass --save-dev

更多笔记,未完待续...