前言
在之前的文章中寫過“Vue3+TS+ElementPlus的安裝和使用教程【詳細(xì)講解】”，但那篇文章寫的是創(chuàng)建vue3的項目沒有使用到Vite構(gòu)建工具進行創(chuàng)建還是使用的常規(guī)webpacket構(gòu)建工具進行創(chuàng)建的。提到Vite和webpacket的時候我們可以簡單說一下。Vite 和 Webpack 都是現(xiàn)代化的前端構(gòu)建工具，它們可以幫助開發(fā)者優(yōu)化前端項目的構(gòu)建和性能。雖然它們的目標(biāo)是相似的，但它們在設(shè)計和實現(xiàn)方面有許多不同之處。具體的區(qū)別和工作原理我們可以看此文章“vite和webpack的區(qū)別和作用”
一、準(zhǔn)備工作安裝工具
這里我們簡單介紹一下文章中使用到的工具，使用這些工具可以提高我們開發(fā)效率。
當(dāng)然了只有nodejs 是必須要安裝的，nvm 、Vite 、NRM 這些都不是必須的，
1.1 nvm nodejs管理工具
nvm全名node.js version management，顧名思義是一個nodejs的版本管理工具。
通過它可以安裝和切換不同版本的nodejs
nvm的下載 nvm下載
有的小伙伴可能打開GitHub網(wǎng)站比較忙，貼心的我?guī)痛蠹覝?zhǔn)備了百度網(wǎng)盤下載
鏈接：https://pan.baidu.com/s/18FZuhmw7OCFeLFpQmf7u6w 提取碼：lnaf
1.1.2 nvm 安裝
雙擊nvm-setup.exe可執(zhí)行文件
選擇nvm安裝路徑
選擇nodejs安裝路徑
安裝
檢查是否安裝成功
nvm version
nvm 常用命令
// 顯示可以安裝的所有nodejs版本
nvm list available
//安裝指定版本的nodejs
nvm install <version>
//顯示已安裝版本列表
nvm list
//使用指定版本node
nvm use [version]
//卸載指定版本node
nvm uninstall <version>
1.2 node.js js運行環(huán)境
Node.js 就不用多說了，官方解釋：Node.js is an open-source, cross-platform JavaScript runtime environment. 翻譯過來：Node.js是一個開源、跨平臺的JavaScript運行時環(huán)境。（我們這邊是創(chuàng)建Vue3的項目，官方是 Node.js 版本 >= 12.0.0。但是我們?yōu)榱?strong>兼容Vite我們這里推薦使用Node.16+,我們這里目前使用的是18.14.2，在cmd窗口輸入node -v，即可查詢到我們當(dāng)前的一個node的版本。）
具體的node安裝請根據(jù)我之前文章進行操作安裝處理即可，這里就不多介紹了。
二、創(chuàng)建Vue3項目
兼容注意：Vite需要Node.js的版本14.18+，16+
然而，有些模板需要依賴更高的 Node 版本才能正常運行，當(dāng)你的包管理器發(fā)出警告時，請注意升級你的 Node 版本。
使用npm 、yarn 、pnpm 其中一種命令安裝即可
1-使用 NPM
npm create vite@latest
使用 Yarn:
yarn create vite@latest
使用 PNPM:
pnpm create vite@latest
2-輸入vue項目名稱，我們這里就叫vite-project
3-選擇使用哪種框架，這里我們當(dāng)然是選擇Vue 了（Vite 不僅僅支持Vue 框架，還支持React、Vanilla、Lit 等前端主流框架）
4-選擇Javascript 和TypeScript（Vue3 已經(jīng)全面擁抱TypeScript，所以這里我們就選擇TypeScript）
5-到此我們就創(chuàng)建完成了，是不是很簡單了
6-我們按照上面提示，進入到 vite-project 項目路徑下 按照依賴
// 切換到項目跟目錄
cd vite-project
//安裝依賴
npm install
為了節(jié)約大家時間，我們這里可以切換npm鏡像源，切換國內(nèi)就可以
#查看當(dāng)前源
npm config get registry
#更換為國內(nèi)鏡像
npm config set registry=http://registry.npm.taobao.org/
7-啟動Vue 項目
// 啟動項目
npm run dev
當(dāng)控制臺看到如下所示，說明啟動成功了
瀏覽器打開如下：
注意點：
我們?nèi)绻岸际怯胿ue2寫之前開發(fā)項目時候，我們這里突然轉(zhuǎn)換用vue3開發(fā)，在使用Vscode的代碼工具時候，vue3需要禁用了以前的vue2，為了兼容代碼規(guī)范，代碼高亮顯示的一款插件安裝插件Vetur不然代碼會提示報錯報紅。再建議安裝Prettier - Code formatter插件【該插件主要用于格式化代碼】，為了高效快捷開發(fā)，再提供一款插件方便尋找路徑和提示Path-intellisense
三、項目結(jié)構(gòu)和特殊頁面介紹
1- 項目結(jié)構(gòu)
2- 特殊頁面介紹
（1）index.html
首頁文件的初始代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
看似這個是普通的html文件，讓它與眾不同的是
加了id=“app”整個項目只有這一個 html 文件，所以 這是一個 單頁面應(yīng)用，當(dāng)我們打開這個應(yīng)用，表面上可以有很多頁面，實際上它們都只不過在一個 div 中
(2) App.vue
該文件稱為“父組件”，因為其它的組件都是這個的兒子組件
.vue 文件是vue 中自定義的文件類型，我們把它看作成html即可，可以在里面寫標(biāo)簽元素、css樣式、js/ts代碼
我們來看看其初始化的代碼
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
這里的HelloWorld 就是引入的子組件，并給子組件傳遞了一個字符串參數(shù)msg=“Vite + Vue”
（3）main.ts
main.ts 通常是應(yīng)用程序的入口文件, App.vue就是通過這個文件和 index.html 里的
代碼如下：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
- import { createApp } from ‘vue’ 導(dǎo)入了 Vue 的 createApp 函數(shù)，用于創(chuàng)建一個 Vue 應(yīng)用實例。
- import ‘./style.css’ 導(dǎo)入了一個 CSS 文件,這里可以忽略
- import App from ‘./App.vue’ 導(dǎo)入了根組件 App ，而App又包含了所有子組件
- createApp(App).mount(‘#app’) 創(chuàng)建了一個 Vue 應(yīng)用實例，并將根組件 App 掛載到具有 id 為 app 的 DOM 元素上。
（4）package.json 文件
package.json 主要是項目依賴配置。
代碼如下
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
"typescript": "^5.2.2",
"vite": "^5.0.8",
"vue-tsc": "^1.8.25"
}
}
這里我簡單敘述一下：
-
“name”: “vite-project” 指定項目的名稱為 “vite-project”
-
“version”: “0.0.0” ：指定項目的版本號，這是一個初始版本號,后面如果項目升級新版本了，可以在這里定義
-
“scripts” ：定義了一些腳本命令，用于開發(fā)、構(gòu)建和預(yù)覽項目
-
“dev”: “vite” ：啟動開發(fā)服務(wù)器，用于在開發(fā)環(huán)境下運行項目。 我們前面通過npm run dev 就是在這兒配置的
-
“build”: “vue-tsc && vite build” ：我們使用TypeScript ，需要將 TypeScript 代碼編譯為 JavaScript才能運行
-
“dependencies” ：列出了項目的生產(chǎn)環(huán)境依賴項。
-
“vue”: “^3.3.4” ：指定了 Vue 的版本為 3.3.4，這是項目所依賴的核心庫。
-
“devDependencies” ：列出了項目的開發(fā)環(huán)境依賴項。
-
“@vitejs/plugin-vue”: “^4.2.3” ：Vite 插件版本
-
“typescript”: “^5.0.2” ：TypeScript 編譯器版本
-
“vite”: “^4.4.5” ：Vite 構(gòu)建工具
四、安裝所需的配置和集成Element Plus
1-安裝Typescript依賴
npm install @types/node --save-dev
2-修改vite.config.ts配置文件代碼
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
//解決“vite use `--host` to expose”
base: './', //不加打包后白屏
server: {
host: '0.0.0.0',
// port: 8080,
open: true
},
resolve:{
//別名配置，引用src路徑下的東西可以通過@如：import Layout from '@/layout/index.vue'
alias:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
})
3-安裝路由
npm install vue-router@4
在src目錄下新建router文件夾，在router里創(chuàng)建index.ts文件
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
{
//路由初始指向
path: '/',
name: 'HelloWorld',
component:()=>import('../components/HelloWorld.vue'),
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
4- main.ts中導(dǎo)入掛載路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App);
app.use(router).mount('#app')
5- 修改App.vue管理路由
<script setup lang="ts">
</script>
<template>
<router-view></router-view>
</template>
<style>
</style>
6- 修改HelloWorld組件
<template>
<h1>HelloWorld</h1>
</template>
<script setup lang="ts">
</script>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
HelloWorld
7- 為了方便我們開發(fā)使用ts文件采用@方式進行導(dǎo)入
在tsconfig.json文件中添加配置（下圖標(biāo)紅的的都是添加和修改的，也可自己豐富）
配置完成后建議重新run一下
8- 安裝配置代碼檢測工具使用eslint-plugin-vue插件
npm install --save-dev eslint eslint-plugin-vue
（1）- 在根目錄創(chuàng)建.eslintrc.js文件
具體配置根據(jù)項目需求自行更改
module.exports = {
root: true,
parserOptions: {
sourceType: 'module'
},
parser: 'vue-eslint-parser',
extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly-recommended', 'plugin:vue/vue3-recommended'],
env: {
browser: true,
node: true,
es6: true
},
rules: {
'no-console': 'off',
'comma-dangle': [2, 'never'] //禁止使用拖尾逗號
}
}
9- css 預(yù)處理器 sass（看習(xí)慣）
npm install -D sass sass-loader
使用如下
<style scoped lang="scss">
.read-the-docs {
color: #888;
}
</style>
10- 安裝Element Plus 官網(wǎng)
npm install element-plus --save
npm install @element-plus/icons-vue // 圖標(biāo)
官網(wǎng)提供了三種用法 完整引入、按需引入、手動導(dǎo)入，這里我們使用按需導(dǎo)入（可以使打包文件變小） 官方也推薦使用按需引入
按需引入：
（1）首先需要安裝unplugin-vue-components 和 unplugin-auto-import這兩款插件
npm install -D unplugin-vue-components unplugin-auto-import
(2)在 Vite 的配置文件vite.config.ts中 添加如下代碼
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 添加
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
],
})
實現(xiàn)效果：
添加全局配置
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";//國際化
const app = createApp(App);
app.use(ElementPlus, { locale: zhCn }).use(router).mount('#app')
//全局注冊圖標(biāo)組件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
使用
<template>
<el-button type="primary" size="default" :icon='Plus'>新增</el-button>
</template>
<script setup lang="ts">
import {Plus} from '@element-plus/icons-vue';
</script>
<style scoped lang="scss">
</style>
注意點：
文章來源：http://www.zghlxwxcb.cn/news/detail-800849.html
按需引入Icon文章來源地址http://www.zghlxwxcb.cn/news/detail-800849.html
<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'
</script>
<template>
<!-- <el-button type="primary">使用element-plus的第一個按鈕</el-button> -->
<el-icon>
<Edit />
</el-icon>
</template>
<style scoped>
</style>
到了這里，關(guān)于詳解Vite創(chuàng)建Vue3項目+vue-router+ts+vite+element-plus的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
