寫在開始:一個(gè)搬磚程序員的隨緣記錄
一、Node安裝
查看Note版本
node -v
查看npm版本
npm -v
然后將npm升級至最新版本
npm -g install npm
將npm下載源換至http://registry.npm.taobao.org
npm config set registry http://registry.npm.taobao.org
可以在后續(xù)的npm下載提高下載速度
二、Vue CLI安裝
安裝vue cli
npm install -g vue-cli
三、相關(guān)的版本
node版本v18.16.1
vue-cli版本v5.0.8
四、創(chuàng)建Vue3+TypeScript項(xiàng)目
創(chuàng)建項(xiàng)目命令
vue create vue_typescript_elementplus_demo
vue_typescript_elementplus_demo是項(xiàng)目名，可以自定義
選擇Manually select features，進(jìn)行自定義
然后選擇TypeScript和Router，空格選擇和不選，選好了回車確定進(jìn)入下一步
這里選擇3.x
下一步按圖上進(jìn)行選擇
然后就等待項(xiàng)目創(chuàng)建結(jié)束，出現(xiàn)如下顯示就創(chuàng)建成功了
現(xiàn)在啟動項(xiàng)目
進(jìn)入項(xiàng)目目錄
cd vue_typescript_elementplus_demo
啟動項(xiàng)目
npm run serve
瀏覽器訪問：http://localhost:8080/
Vue+TypeScript項(xiàng)目就創(chuàng)建好了
五、Vue項(xiàng)目初始化
前端專業(yè)IDEA是vscode，可以自行下載配置，我是因?yàn)槭枪ぷ髦饕訨ava為主，所以我用的IntelliJ IDEA進(jìn)行開發(fā)的
用項(xiàng)目結(jié)構(gòu)
我們現(xiàn)在從零開始開發(fā)，去掉一些創(chuàng)建項(xiàng)目自帶的一些演示的頁面的資源
去掉assets下的所有文件
去掉components下的所有文件
去掉views下的所有文件
如果刪除文件的時(shí)候提示：
這是是文件權(quán)限不夠，進(jìn)入項(xiàng)目文件的上面一個(gè)層級，執(zhí)行下面的命令
sudo chmod -R 777 ./vue_typescript_elementplus_demo/
然后再進(jìn)行刪除
修改App.vue文件
<template>
<div id="app">
<router-view />
</div>
</template>
<style>
html,
body,
#app {
width: 100%;
height: 100%;
}
</style>
在src/views下創(chuàng)建Login.vue
<template>
<div>這是登錄頁面</div>
</template>
<script>
export default {
name: 'Login'
}
</script>
<style scoped></style>
修改src/router下的index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Login',
component: () => import('../views/Login.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
六、項(xiàng)目啟動
然后重啟下項(xiàng)目，看下效果
這里一個(gè)簡單的vue項(xiàng)目就搭建完成了。
后續(xù)章節(jié)會介紹使用element-plus美化頁面和axios進(jìn)行接口的請求文章來源：http://www.zghlxwxcb.cn/news/detail-644298.html
Over文章來源地址http://www.zghlxwxcb.cn/news/detail-644298.html
到了這里，關(guān)于Vue+SpringBoot后臺管理系統(tǒng)：Vue3+TypeScript項(xiàng)目搭建（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
