vue3.0项目创建以及路由搭建

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

npm i -g @vue-cli

安装时可能会出现错误，提示已经安装，可以根据错误提示找到相应目录，删除目录中的内容，再从新安装即可。

安装好后创建一个Vue项目

vue-cle 3 用的是

vue create projectName

随后出现自主选择，选择最后一个，自定义安装

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

确定后出现选择内容， 做好相应的选择后确定

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

随后会出现选择vue版本, 可以选择 2.0 在 手动提升版本，也可以直接选择3，0版本

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

后面的选项就可以自己选择了。 如果选择了vue 版本的话，可以在对应的目录下执行

vue add vue-next

这样就可以自动转换为 vue3 的版本。


创建完成后 来完成路由的搭建。
搭建路由需要vue-router 但是在vue2中使用的路由是无法在 vue3中使用的。
所以我们需要更改package.json

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0-beta.1",
    "vue-router": "4.0.0-alpha.6"//这是无问题版本，alpha4会报错
  },

随后执行npm i之后准备就完成了
首先我们按照正常的方式创建 页面以及路由 目录如下
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;

创建好路由之后，我们需要引入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');

别忘了更改新建项目的App.vue，这样页面上就会显示Home页面上的数据了