vite vue3嘗鮮
Tags: vite, vue3
日期: 2021/05/26
前兩天看尤大直播,討論了vite.前幾個月剛出來的時候也用過,當時感覺代碼編譯速度確實快,但是相關的技術文檔,資源很少,發現很多問題自己解決不了就勸退了.最近又試了一遍,發現還是很不錯的.
創建項目
使用npm進行安裝
//使用npm創建項目
npm init @vitejs/app
//接下來輸入項目名
Project name: vite-project
//選擇哪個框架 我選的是vue
√ Project name: ·
? Select a framework: ...
vanilla
> vue
react
preact
lit-element
svelte
// 是否啟用typescript支持 我選的是啟用
? Select a variant: ...
JavaScript
> TypeScript
進入項目下載依賴
npm install
運行項目
npm run dev
這個時候可以看到項目已經打開了,但是什么Router,VueX都沒有安裝,接下來安裝
注意!如果自己創建組件的話需要在外面包裹一層defineComponent這樣才會有ts提示
使用Less
npm install -D less
如果是用的是單文件組件，可以通過 <style lang="sass">（或其他與處理器）自動開啟。
安裝Vue Router
npm
npm install vue-router@4
創建route文件夾,下面放置index.ts
配置index.ts
// 創建vue router,使用哈希模式
import {createRouter, createWebHashHistory} from "vue-router";
import index from '../pages/index.vue'
// 動態引入組件
const FirstDemo = () => import('/src/components/first_demo.vue')
const ComponentsTransfer = () => import('/src/components/Father.vue')
const vuexTest = () => import('/src/components/vuexTest.vue')
const routes = [
{
path: "/",
component: index
},
{
path:'/FirstDemo',
component:FirstDemo
},
{
path:'/ComponentsTransfer',
component:ComponentsTransfer
},
{
path:'/vuexTest',
component:vuexTest
}
]
// 導出路由
export const router = createRouter({
history: createWebHashHistory(),
routes: routes
})
main.ts中引入route
import {createApp} from 'vue'
import App from './App.vue'
// 引入路由
import {router} from './route'
const app = createApp(App)
// 掛載路由
app.use(router)
app.mount('#app')
使用路由進行跳轉
<template>
<div class="Index">
<div>
<router-link to="/FirstDemo">FirstDemo</router-link>
</div>
<div>
<router-link to="/ComponentsTransfer">ComponentsTransfer</router-link>
</div>
<div>
<router-link to="/vuexTest">vuexTest</router-link>
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "index",
});
</script>
<style></style>
獲取路由參數
<script>
import {useRoute, useRouter} from "vue-router";
export default defineComponent({
name: "vuexTest",
setup(props, context) {
const route=useRoute()
console.log(route.hash)
},
});
</script>
<style></style>
使用VueX
npm
npm install vuex@next --save
配置vuex
創建store文件夾,下面放置index.ts
import { createStore } from "vuex";
export default createStore({
state() {
return {
count: 0,
};
},
mutations: {
increment(state) {
// @ts-ignore
state.count++
},
},
actions: {
increment(context) {
context.commit("increment");
},
},
});
main.js配置
import {createApp} from 'vue'
import App from './App.vue'
import {router} from './route'
import store from './store'
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
使用Vuex
<template>
<div>storeCount:{{ storeCount }}</div>
<button @click="addStoreCount">點我增加</button>
</template>
<script>
import { defineComponent, onMounted, ref, watch } from "vue";
import store from "../store/index.ts";
export default defineComponent({
name: "vuexTest",
setup(props, context) {
let storeCount = ref(0);
onMounted(() => {
storeCount.value = store.state.count;
});
const addStoreCount = () => {
// store.commit("increment");
store.dispatch("increment");
storeCount.value = store.state.count;
};
return {
storeCount,
addStoreCount,
};
},
});
</script>
<style></style>
使用axios
npm
npm i axios --save-dev
在src目錄下創建 utils/axios.ts
import axios from "axios";
import qs from "qs";
// axios.defaults.baseURL = '' //正式
// axios.defaults.baseURL = 'http://test' //測試
//post請求頭
axios.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";
//設置超時
axios.defaults.timeout = 10000;
axios.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.reject(error);
}
);
axios.interceptors.response.use(
response => {
if (response.status == 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
alert(`異常請求：${JSON.stringify(error.message)}`)
}
);
export default {
post(url: string, data: object) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url,
data: qs.stringify(data),
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
});
})
},
get(url:string, data:object) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
params: data,
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
})
})
}
};
在main.js掛載
注意,在VUE3中不能像VUE2直接prototype掛載到原型上,需要使用globalProperties
import {createApp} from 'vue'
import App from './App.vue'
import {router} from './route'
import store from './store'
import axios from './utils/axios'
const app = createApp(App)
app.use(router)
app.use(store)
//全局配置
app.config.globalProperties.$http=axios
app.mount('#app')
使用Axios
// 通過 ctx 屬性獲得當前上下文
// 直接強制確認
const {ctx} = getCurrentInstance()!;
// 2.使用as強轉
// const {ctx} = getCurrentInstance() as ComponentInternalInstance;
const Login = () => {
ctx.$http.post('https://www.fastmock.site/mock/2f875ab9c10f3100cc72125a9bf0945a/vue3_vite/login', {
username: 'admin',
password: '123456'
}).then((res: any) => {
console.log(res)
})
};
onMounted(() => {
Login()
});