vue3全家桶快速初始化

vite使用及创建项目

使用npm

1	npm init vite@latest

使用 Yarn

1	yarn create vite

使用 PNPM

1	pnpm create vite

根据提示即可

vue-router的使用

官方文档

安装

使用npm

1	npm install vue-router@4

使用yarn

1	yarn add vue-router@4

使用

==1.在src下新建 router/index.ts==

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: '组件名',
        redirect: '/' ,//重定向
        component: () => import('组件路径'),
        children:[{path:'',name:'',components:{}}]//有子组件时
    },
    {
       	path: '/',
        name: '组件名',
        component: () => import('组件路径'),
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

==2.在main.ts中挂载使用==

import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

==3.router-link和router-view==

1 2	<!-- 使用to='/路径'来指定链接 --> <router-link to="/">Go to sw</router-link>

1 2	<!-- 放到想要呈现路由的地方 --> <router-view></router-view>

路由传参

query传参

==在需要传参的组件中==

import {useRouter } from 'vue-router';
const router = useRouter();
// 传递参数,一般为button添加事件触发
const 事件名 = () => {
  // 编程式跳转和传参
  router.push({
    path: '/目标路径',
    query: {
      msg: '这是路由传入的参数'
    }
  })
};

==在需要接收参数的组件中==

1
2
3

import { useRoute} from 'vue-router';
const route=useRoute()
const 接收变量名=route.query.msg

或者直接使用

1	{{route.query.msg}}

一定要注意 router和route的区别！！

router传参、route接收

小菠萝Pinia

小菠萝文档

相比vuex的优势

Pinia 提供了一个更简单的 API，具有更少的规范
vue3
可以更好的兼容TypeScript

安装

1	npm install pinia

使用

==1.在main.ts挂载==

1
2
3

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

==2.在src中创建容器文件夹store及index.ts==

import { defineStore } from 'pinia'
export const 函数名 = defineStore('唯一id', {
    state: () => {
        return {
           //类似data
           // 属性名1：值,
           // 属性名2：值,
           // 属性名3：值,
        }
    },
    getters: {
        //类似computed
        //方法名(state){
         //   return 
         //   state.属性·······
        //}
    },
    actions: {
        //类似methods
        //函数名(state: any) {
         //   state.属性 =······
        //}
    }

})

==3.在需要使用的组件中==

import {函数名} from './store.index.ts'
const mypinia=函数名()//调用函数以实例

//直接使用 例如
mypinia.属性名  
mypinia.方法名

数据更新

在使用的组件中更新 $patch

用 $patch 实现批量更新

const function=()=>{
	mypinia.$patch(state=>{
        state.属性1++
        state.属性2=·····
    })
}

逻辑过多时可以封装到actions中

//在store/index.ts中
actions:{
    函数名(){
        this.属性1++
        this.属性2·····
	}
}
//同样可以使用$patch实现批量更新
actions:{
    函数名(){
        this.$patch(state=>{
            state.属性1++
        	state.属性2=·····
        })
	}
}

使用时调用： mypinia.函数名( )

Element+

官方文档

安装

1	npm install element-plus --save

使用

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(ElementPlus)

axios

官方文档

安装

1	npm install axios

简易封装

创建http文件夹，并新建index.ts

import axios from 'axios'
//创建axios实例
const $http = axios.create({
    baseURL: '',
    timeout: 1000,
});

// 添加请求拦截器
$http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
$http.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
    //列如  return response.data 可以直接返回.data的值
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default $http

在新建一个文件夹apis，将所有用到的api封装于此

import $http from "../http/index";
// 获得本地json
export const getBanner = () => $http.get('/json/banner.json',{ params: { way:'这样传参' } })
// 获得开源接口
export const GetSaying = (id: number) => $http.get(`https://paul.ren/api/say?id=${id}`)

使用class封装

import axios, { AxiosRequestConfig,AxiosResponse } from 'axios'
const defaultConfig = {
    baseUrl: '',
    timeout: 1500,
}
class Http {
    constructor() {
        this.HttpInterceptorsRequest()
        this.HttpInterceptorsResponse()
    }
    private static axiosInstance = axios.create(defaultConfig)
    // 请求拦截
    private HttpInterceptorsRequest() {
        Http.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
            return config
        }, err => {
            return Promise.reject(err)
        })
    }
    //响应拦截
    private HttpInterceptorsResponse() {
        Http.axiosInstance.interceptors.response.use((config: AxiosResponse) => {
            return config
        }, err => {
            return Promise.reject(err)
        })
    }

    //封装请求
    //get
    public httpGet<T>(url: string, params: AxiosRequestConfig): Promise<T> {
        return Http.axiosInstance.get(url, params).then(res => res.data).catch()
    }
    //post
    public httpPost<T>(url: string, params: AxiosRequestConfig): Promise<T> {
        return Http.axiosInstance.post(url, params).then(res => res.data).catch()
    }
}

export const http = new Http()

使用

import { GetSaying } from "../http/apis";
const saying = ref();
onMounted(async () => {
  await GetSaying().then((res) => {
     saying= res.data;
  });
});

使用eslint

1 2	npm install eslint -D npx eslint --init

按需选择配置并安装即可

使用Sass

1	npm i sass -D

安装完成后，还需要在vite.config.ts中添加配置

 export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: ``
      },
      styl: {
        additionalData: ``
      }
    }
  }
})

在src/assets下新建scss文件

//在配置中填入新建scss文件路径
scss: {
        additionalData: `@import "src/assets/scss/variable.scss";`
      },

在需要使用的页面设置

1
2
3

<style scoped lang='scss'>
@import '../../assets/scss/home/index.scss';
</style>