首先可以先安裝最新版本的vue-cli

npm i -g @vue-cli

安裝時(shí)可能會(huì)出現(xiàn)錯(cuò)誤，提示已經(jīng)安裝，可以根據(jù)錯(cuò)誤提示找到相應(yīng)目錄，刪除目錄中的內(nèi)容，再?gòu)男掳惭b即可。

安裝好后創(chuàng)建一個(gè)Vue項(xiàng)目

vue-cle 3 用的是

vue create projectName

隨后出現(xiàn)自主選擇，選擇最后一個(gè)，自定義安裝

    Default ([Vue 2] babel, eslint)
    Default (Vue 3 Preview) ([Vue 3] babel, eslint)
 > Manually select features

確定后出現(xiàn)選擇內(nèi)容， 做好相應(yīng)的選擇后確定

 Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

隨后會(huì)出現(xiàn)選擇vue版本, 可以選擇 2.0 在 手動(dòng)提升版本，也可以直接選擇3，0版本

 Choose a version of Vue.js that you want to start the project with (Use arrow
keys)
> 2.x
  3.x (Preview)

后面的選項(xiàng)就可以自己選擇了。 如果選擇了vue 版本的話，可以在對(duì)應(yīng)的目錄下執(zhí)行

vue add vue-next

這樣就可以自動(dòng)轉(zhuǎn)換為 vue3 的版本。


創(chuàng)建完成后 來(lái)完成路由的搭建。
搭建路由需要vue-router 但是在vue2中使用的路由是無(wú)法在 vue3中使用的。
所以我們需要更改package.json

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0-beta.1",
    "vue-router": "4.0.0-alpha.6"http://這是無(wú)問(wèn)題版本，alpha4會(huì)報(bào)錯(cuò)
  },

隨后執(zhí)行npm i之后準(zhǔn)備就完成了
首先我們按照正常的方式創(chuàng)建 頁(yè)面以及路由 目錄如下
src/pages/Home.vue
src/ruter/index.js
更改了vue-router之后 路由

import Home from '../pages/Home.vue';
import { createRouter, createWebHistory } from 'vue-router';//和vue2 路由不同
const routerHistory = createWebHistory();

const router = createRouter({
  history: routerHistory,//history寫法不同
  routes: [
    {
      path: '/',
      component: Home,
    },
  ],
});

export default router;

創(chuàng)建好路由之后，我們需要引入main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);

app.mount('#app');

別忘了更改新建項(xiàng)目的App.vue，這樣頁(yè)面上就會(huì)顯示Home頁(yè)面上的數(shù)據(jù)了