仅用于创建一个基于Vue3、Vant3、vue-router、axios的Vue3项目,Vant使用按需引入
1.新建vue项目
npm install -g @vue/cli
vue create [项目名称]
这里不需要npm i vue@next喔
2.路径更改至新建的vue项目处
cd [项目名称]
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
其他注意事项
- vant按需引入需要在main.js和babel.config.js中都要加东西,详见Gitee[志愿之家]项目
在babel.config.js文件中内容改为:
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上下载的项目可以先安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
再cnpm install
即可