vue3出來(lái)一段時(shí)間了由于一些兼容等其他問(wèn)題.不少同學(xué)還沒(méi)有真正的上手vue3,正趕上公司移動(dòng)端有個(gè)新項(xiàng)目 ,正好一起學(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回車(chē)鍵,如下圖:
選擇后方向鍵選擇vue-ts回車(chē)鍵,如下圖:
按照提示命令 進(jìn)入到項(xiàng)目目錄安裝依賴(lài)執(zhí)行腳本,提示命令如下圖:
執(zhí)行完成后 出現(xiàn)如下提示,證明項(xiàng)目初始化成功
復(fù)制http://localhost:3001/鏈接或者ctrl+鼠標(biāo)左鍵瀏覽器打開(kāi),如下圖:
vscode編輯器安裝Volar
由于vetur對(duì)ts支持有一些問(wèn)題 建議卸載或者禁用vetur直接安裝Volar插件
項(xiàng)目集成Element Plus
npm install element-plus --save //或yarn add element-plus
自動(dòng)按需導(dǎo)入
Element Plus文檔推薦的unplugin-vue-components 和** unplugin-auto-import**插件可以實(shí)現(xiàn)自動(dòng)按需導(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òng)導(dǎo)入了
項(xiàng)目集成vue-router
npm install vue-router@4
注意:vue3中使用 vue-router 4.x的版本在寫(xiě)法上與之前寫(xiě)法有很大不同
// 以前是
// import Router from 'vue-router'
//我們需要new Router()
//在src目錄下新建router文件夾 ,在router文件夾中新建index.ts,寫(xiě)入如下代碼
//在src目錄下新建views文件夾,在views文件夾下新建Home.vue文件
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'//引入自己建的vue組件
const routes: RouteRecordRaw[] = [
{
path: '/',//必填項(xiàng)
component: Home,//必填項(xiàng)
},
]
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下面我們驗(yàn)證一下
修改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 啟動(dòng)項(xiàng)目 我這里會(huì)看到 Local: http://localhost:3001/，瀏覽器輸入你Local: 后面的地址可以看到如下內(nèi)容：
后記：
這樣我們的項(xiàng)目框架就已經(jīng)集成了UI框架及路由插件算是初步成型，可以滿(mǎn)足一些正常的組件開(kāi)發(fā)了。為了滿(mǎn)足不同開(kāi)發(fā)經(jīng)驗(yàn)的讀者前兩篇文章相對(duì)基礎(chǔ)，希望0基礎(chǔ)的同學(xué)也能跟著完成項(xiàng)目的搭建。畢竟萬(wàn)事開(kāi)頭難，到這其實(shí)已經(jīng)成功一半了。后面會(huì)在陸續(xù)集成less，sass一些css的預(yù)處理工具vscode一些常用的插件配置 快捷代碼片段eslint等。由于內(nèi)部項(xiàng)目不方便上傳 ，后面項(xiàng)目我會(huì)基于Element Plus進(jìn)行二次封裝， 以便熟悉vue3的使用也可以增加我們自己開(kāi)發(fā)組件的能力，并且后面也會(huì)詳細(xì)的說(shuō)一下vite配置，vue3的原理 ts的寫(xiě)法等。
