一蛉幸、安裝
選擇一個文件夾脊岳，在終端中打開
使用npm進(jìn)行安裝（需要 Node.js 版本 >= 12.0.0）牲蜀，輸入以下命令
npm init @vitejs/app
使用yarn進(jìn)行安裝瘦材，輸入以下命令
yarn create @vitejs/app
也可一步創(chuàng)建
npm init @vitejs/app my-vue-app --template vue
具體步驟見下圖矩动，這里使用的是yarn
創(chuàng)建項目的三步
yarn install后執(zhí)行yarn run dev脂信，可以看到唇兑，啟動項目只用了1秒多（選擇的模板為vue）
二锨并、新增特性
1.結(jié)合script setup語法糖
從上圖中可以看到vite初始化出來的組件script標(biāo)簽中默認(rèn)加入了setup厦坛，這種寫法源于之前的一個關(guān)于script setup提案五垮，感興趣的可以看下，寫法跟之前有很多區(qū)別杜秸，寫了兩個demo放仗，可以實際運行起來體驗下，用的是上面初始化的項目撬碟，寫法比之前簡單許多诞挨。
（父組件，也就是App.vue)
//App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue + Vite" @mycilck="myclick" ref="child"/>
<button @click="childlog">子組件方法</button>
</template>
<script setup>
//組件導(dǎo)入呢蛤，不用注冊直接使用,屬性方法定義惶傻，無需retrun
//<script setup>這種寫法會自動將所有頂級變量聲明暴露給模板（template）使用
import HelloWorld from "comps/HelloWorld.vue"
import {ref} from "vue"
const child=ref(null)
const myclick= ()=>{
console.log("this is myclick");
}
const childlog=()=>{
child.value.log("父組件傳遞的數(shù)據(jù)")
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
（子組件，也就是HelloWorld.vue)
//HelloWorld組件
<template>
<h1>{{ msg }}</h1>
<button @click="state.count++">count is: {{ state.count }}</button>
<button @click="onclick">emit</button>
</template>
<script setup>
import { defineProps, reactive, useContext } from 'vue'
import { defineEmit } from 'vue'
//1.pops屬性定義
defineProps({
msg: String,
})
//2.獲取上下文
const ctx = useContext()
//向外暴露的方法
ctx.expose({
log:function(str) {
console.log('子組件暴露的方法',str)
},
})
//3.emit接收事件
const emit = defineEmit(['myclick'])
const onclick = () => {
//也可直接使用上下文中的emit:ctx.emit('mycilck')
emit('mycilck')
}
const state = reactive({ count: 0 })
</script>
<style scoped>
a {
color: #42b983;
}
</style>
2.配置項其障，更多詳細(xì)配置見官網(wǎng)
// 通過引入defineConfig來加入代碼提示
import { defineConfig } from 'vite'
// 通過引入vue插件來完成對vue的支持,須在plugins中注冊
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
export default defineConfig({
//1.別名配置
resolve: {
alias: [
{ find: '@', replacement: resolve(__dirname, 'src') },
{ find: 'comps', replacement: resolve(__dirname, 'src/components') },
],
},
//2.插件相關(guān)配置
plugins: [vue()],
//3.服務(wù)有關(guān)配置
server: {
open: true,
/* 設(shè)置為0.0.0.0則所有的地址均能訪問 */
host: '0.0.0.0',
port: 9000,
https: false,
proxy: {
'/api': {
/* 目標(biāo)代理服務(wù)器地址 */
target: 'http://xxx:9000/',
/* 允許跨域 */
changeOrigin: true,
},
},
}
})
3.css更好的支持
現(xiàn)在單獨的一個css文件也可導(dǎo)入,如在當(dāng)前組件需要main.css中定義的樣式银室，只需要@import url(）
<style scoped>
@import url('../assets/css/main.css');
</style>
更多有關(guān)CSS特性參考官網(wǎng)給出的配置，我這里就不詳細(xì)說明了
三励翼、問題
1.vite中不能使用require
有時候蜈敢，我們需要動態(tài)綁定圖片的時候會用到require('../xxx')
但是在vite中會出現(xiàn)這樣一個錯誤
原因：因為vite使用的是瀏覽器自帶的module去解析js的,而require語法是node語法,自然報錯
解決：
1.直接使用import導(dǎo)入，import imgUrl from './img.png'汽抚，界面中直接使用即可抓狭。詳細(xì)可參考官網(wǎng)，靜態(tài)資源處理
2.使用絕對路徑或者把需要require引入的圖片放到public文件夾下,這樣打包前后路徑都不會被處理,可以保證路徑的正確性
有關(guān)項目我已上傳殊橙，地址為https://github.com/czy1026/vite-test.git
