【Vue】新建一个Vue3项目

目录

• 1.新建vue项目
• 2.路径更改至新建的vue项目处
• 3.安装cnpm
• 4.cnpm安装vant3
• 5.安装babel-plugin
• 6.安装vue路由
• 7.安装axios
• 其他注意事项

---

仅用于创建一个基于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上下载的项目可以先安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org再cnpm install即可