vue3出來一段時間了由于一些兼容等其他問題.不少同學(xué)還沒有真正的上手vue3,正趕上公司移動端有個新項目 ,正好一起學(xué)習(xí)吧
node環(huán)境準(zhǔn)備
node -v //查看node版本,Vite 需要 Node.js 版本 >= 12.0.0
安裝vite
npm init vite@latest //或者yarn create vite
安裝成功后方向鍵 選擇到vue回車鍵,如下圖:
選擇后方向鍵選擇vue-ts回車鍵,如下圖:
按照提示命令 進(jìn)入到項目目錄安裝依賴執(zhí)行腳本,提示命令如下圖:
執(zhí)行完成后 出現(xiàn)如下提示,證明項目初始化成功
復(fù)制http://localhost:3001/鏈接或者ctrl+鼠標(biāo)左鍵瀏覽器打開,如下圖:
vscode編輯器安裝Volar
由于vetur對ts支持有一些問題 建議卸載或者禁用vetur直接安裝Volar插件
項目集成Element Plus
npm install element-plus --save //或yarn add element-plus
自動按需導(dǎo)入
Element Plus文檔推薦的unplugin-vue-components 和** unplugin-auto-import**插件可以實現(xiàn)自動按需導(dǎo)入,
npm install -D unplugin-vue-components unplugin-auto-import
在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({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
這樣就不用每次用到新組件在手動導(dǎo)入了
項目集成vue-router
npm install vue-router@4
注意:vue3中使用 vue-router 4.x的版本在寫法上與之前寫法有很大不同
// 以前是
// import Router from 'vue-router'
//我們需要new Router()
//在src目錄下新建router文件夾 ,在router文件夾中新建index.ts,寫入如下代碼
//在src目錄下新建views文件夾,在views文件夾下新建Home.vue文件
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'//引入自己建的vue組件
const routes: RouteRecordRaw[] = [
{
path: '/',//必填項
component: Home,//必填項
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
修改main.ts文件代碼如下:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router).mount('#app')
到此我們已經(jīng)集成了Element Plus和vue-router下面我們驗證一下
修改Home.vue文件代碼如下：
<script setup lang="ts">
import { ref } from 'vue'
// defineProps<{ msg: string }>()
const count = ref(5)
console.log(count.value)
</script>
<template>
//直接使用 Element Plus的button組件
<el-button type="primary" @click="count++">count is: {{ count }}</el-button>
</template>
<style scoped></style>
修改App.vue中的代碼如下：
<template>
<router-view></router-view>
</template>
<script setup lang="ts"></script>
<style></style>
在命令行輸入 npm run dev 啟動項目 我這里會看到 Local: http://localhost:3001/械馆，瀏覽器輸入你Local: 后面的地址可以看到如下內(nèi)容：
后記：
這樣我們的項目框架就已經(jīng)集成了UI框架及路由插件算是初步成型，可以滿足一些正常的組件開發(fā)了。為了滿足不同開發(fā)經(jīng)驗的讀者前兩篇文章相對基礎(chǔ)不跟，希望0基礎(chǔ)的同學(xué)也能跟著完成項目的搭建佩伤。畢竟萬事開頭難甚垦，到這其實已經(jīng)成功一半了利花。后面會在陸續(xù)集成less抄囚，sass一些css的預(yù)處理工具vscode一些常用的插件配置 快捷代碼片段eslint等微酬。由于內(nèi)部項目不方便上傳 绘趋，后面項目我會基于Element Plus進(jìn)行二次封裝， 以便熟悉vue3的使用也可以增加我們自己開發(fā)組件的能力颗管，并且后面也會詳細(xì)的說一下vite配置陷遮，vue3的原理 ts的寫法等。
