目錄

• 1.新建vue項(xiàng)目
• 2.路徑更改至新建的vue項(xiàng)目處
• 3.安裝cnpm
• 4.cnpm安裝vant3
• 5.安裝babel-plugin
• 6.安裝vue路由
• 7.安裝axios
• 其他注意事項(xiàng)

---

僅用于創(chuàng)建一個(gè)基于Vue3、Vant3、vue-router、axios的Vue3項(xiàng)目，Vant使用按需引入

1.新建vue項(xiàng)目

npm install -g @vue/cli
vue create [項(xiàng)目名稱]
這里不需要npm i vue@next喔

2.路徑更改至新建的vue項(xiàng)目處

cd [項(xiàng)目名稱]

3.安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

4.cnpm安裝vant3

cnpm i vant@3 -S

5.安裝babel-plugin

npm i babel-plugin-import -D

6.安裝vue路由

cnpm i vue-router@^4.0.12 -S

7.安裝axios

cnpm i axios@next -S

其他注意事項(xiàng)

• vant按需引入需要在main.js和babel.config.js中都要加?xùn)|西，詳見Gitee[志愿之家]項(xiàng)目

在babel.config.js文件中內(nèi)容改為：

module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [["import",{"libraryName": "vant","libraryDirectory": "es","style": true}]]
}

在main.js文件中添加格式為：

import {Button} from 'vant';
app.use(Button);

• vue-router路由的添加格式
  在main.js中添加格式為：

import{ createRouter,createWebHashHistory} from 'vue-router'const home = import('./components/home.vue');const routes = [{path:'/',redirect:'/home'},{ path: '/home', component: home},
]const router = createRouter({history:createWebHashHistory(),routes, 
})

• 最后裝好按需引入的vant3和router的main.js文件模板為：

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);import {Button} from 'vant';app.use(Button);import{ createRouter,createWebHashHistory} from 'vue-router'const home = import('./components/home.vue');const routes = [{path:'/',redirect:'/home'},{ path: '/home', component: home},
]const router = createRouter({history:createWebHashHistory(),routes, 
})app.use(router).mount('#app');

• GitHub或Gitee上下載的項(xiàng)目可以先安裝cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org再cnpm install即可

總結(jié)

以上是生活随笔為你收集整理的【Vue】新建一个Vue3项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。