1.Path
npm install @types/node --save-dev
npm i sass-loader sass -d
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path'
vite.config.js
const resolve = (dir: string) => path.join(__dirname, dir)
export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve('src'), 'comps': resolve('src/components'), 'apis': resolve('src/apis'), 'views': resolve('src/views'), 'utils': resolve('src/utils'), 'routes': resolve('src/routes'), 'styles': resolve('src/styles') } }, })
- 在
tsconfig.node.json文件中 - 添加
"allowSyntheticDefaultImports": true 
- 在
tsconfig.json文件中 - 添加
-
"paths": { "@":["./src"], "@/*":["./src/*"] //添加类别名 }
2.Axios跨越
实现跨域共3个步骤：
1，vue3.0根目录下创建vue.config.js文件；
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://you.163.com/', //接口域名
changeOrigin: true, //是否跨域
ws: true, //是否代理 websockets
secure: true, //是否https接口
pathRewrite: { //路径重置
'^/api': ''
}
}
}
}
};
2，将上述代码块写入其中；
如图：
3，将api接口放入请求的url中；
使用页面的代码块：
<template>
<div>
<H1>TEST</H1>
<p>{{data}}</p>
</div>
</template>
<script>
import axis from 'axios';
export default {
name: 'Test',
data() {
return {
data: {},
};
},
methods: {
getData() {
axis.get('/api/xhr/search/queryHotKeyWord.json')//axis后面的.get可以省略；
.then(
(response) => {
console.log(response);
this.data = response;
})
.catch(
(error) => {
console.log(error);
});
},
},
mounted() {
this.getData();
},
};
</script>
<style scoped>
</style>
代码解析：
浏览器页面：
剩下的就是把数据渲染到页面了。
实际示例
vue3 8080端口请求flask8081端口服务数据：
module.exports = {
devServer: {
host: '0.0.0.0',
port: 8080,
open: true,
proxy: {
'/api/testcase/': {
target: 'http://127.0.0.1:8081/', //接口域名
changeOrigin: true, //是否跨域
ws: true, //是否代理 websockets
secure: true, //是否https接口
pathRewrite: { //路径重置
'^/api/testcase/': '/api/testcase/'
}
}
},
},
}
axis.get('/api/testcase/')//axis后面的.get可以省略；
.then(
(response) => {
console.log(response);
this.totaltableData = response.data['result'];
})
.catch(
(error) => {
console.log(error);
});
flask接口地址:
# http://127.0.0.1:8081/api/testcase/
@app.route('/api/testcase/')
def alltestcase():
pass
3.Router
npm i vue-router@next
index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path:'/',
component:()=>import('@/components/testhome.vue')
}
]
const router = createRouter({
history:createWebHashHistory(),
routes:routes
})
export default router
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
4.Vuex4
npm i vuex@next
index.ts
import { createStore } from "vuex";
interface State{
count:number
}
const store = createStore<State>({
state(){
return{
count:0
}
},
mutations:{
increment(state){
state.count++
}
}
})
export default store
test.vue
<template lang=""> <div> 测试一下 <button @click="increment">{{count}}</button> </div> </template> <script setup> import { ref, computed } from 'vue' import { useStore } from 'vuex' const store = useStore(); const count = computed(() => { return store.state.count }) const increment = () => { store.commit('increment') } </script> <style lang=""> </style>
5.element-plus
npm install element-plus --save
完整引入#
如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
// main.ts import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
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 或 Webpack 的配置文件中
Vite#
// vite.config.ts import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default { plugins: [ // ...
AutoImport({
imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
Volar 支持#
如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。
// tsconfig.json{
"compilerOptions": { // ... "types": ["element-plus/global"] } }
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"auto-imports.d.ts",
"components.d.ts"
],
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()], }), ], }
6.启动后，不能够用ip地址访问，只能用localhost
启动后，不能够用ip地址访问，只能用localhost
启动指令添加 '--host' 配置即可。
"dev": "vite --host"
7.sass
npm i sass-loader sass -d
vite.config.ts
css:{ preprocessorOptions:{ scss:{ additionalData:`@import "./src/sytle/variables.scss";`, } } },
8.判断是否移动设备
isMoblie.ts
export const isMoblie = () => { let flag = navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i) return flag }
9.pinia（大菠萝）
npm install pinia
// 容器钩子
import { defineStore } from "pinia";
export const useCounterStore = defineStore('count', {
// 创建state
state: () => ({
count: 0,
msg: 'hello,world',
ary: [1, 2, 3,],
}),
// 计算
getters: {
doubleCount(state): number {
return state.count * 2
// return this.count * 2
},
OneCount(): number {
return this.doubleCount + 1
}
},
// 方法
actions: {
change() {
this.count += 2;
this.msg = "哈哈哈"
}
}
})
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')