使用Vue CLI创建Vue项目并使用Vue Router进行基本配置的步骤

步骤 1: 安装 Vue CLI

首先，确保你的电脑上已经安装了Node.js和npm。然后，通过以下命令安装Vue CLI（如果已经安装，请跳过此步骤）：

npm install -g @vue/cli

1

步骤 2: 创建新的Vue项目

使用Vue CLI创建一个新的Vue项目。在命令行中执行以下命令：

vue create vue-router-demo

1

这将创建一个名为vue-router-demo的新目录，并安装Vue.js的基本项目结构和依赖项。

步骤 3: 安装 Vue Router

进入项目目录，并安装Vue Router：

cd vue-router-demo

npm install vue-router

1

2

步骤 4: 创建和配置路由

在项目的根目录（src目录下）创建一个新文件夹router，然后在其中创建一个名为index.js的文件。在该文件中配置路由：

// src/router/index.js

import Vue from 'vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 定义路由

const routes = [

{

  path: '/',

  name: 'Home',

  component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')

},

{

  path: '/about',

  name: 'About',

  component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

}

];

// 创建 Router 实例

const router = new VueRouter({

mode: 'history', // 可选：'hash' | 'history'

base: process.env.BASE_URL,

routes

});

export default router;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

步骤 5: 创建视图组件

在src/views目录下创建两个Vue组件文件：Home.vue和About.vue，并编写内容：

  <h1>Home</h1>

  <p>Welcome to the Home Page!</p>

export default {

name: 'Home'

}

1

2

3

4

5

6

7

8

9

10

11

12

13

  <h1>About</h1>

  <p>This is an About Page.</p>

export default {

name: 'About'

}

1

2

3

4

5

6

7

8

9

10

11

12

13

步骤 6: 在主应用程序中使用路由

在src/main.js中导入创建的路由，并将其挂载到Vue实例中：

// src/main.js

import Vue from 'vue';

import App from './App.vue';

import router from './router';

new Vue({

router,

render: h => h(App),

}).$mount('#app');

1

2

3

4

5

6

7

8

9

10

11

12

步骤 7: 创建入口组件

创建入口组件App.vue并定义主要的应用程序结构：

<div id="app">

  <router-link to="/">Home</router-link> |

  <router-link to="/about">About</router-link>

  <router-view/>

export default {

name: 'App'

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

步骤 8: 运行和测试

最后，在项目根目录下运行以下命令启动开发服务器，并在浏览器中查看效果：

npm run serve

1

这将启动一个开发服务器，你可以在浏览器中访问http://localhost:8080查看你的Vue应用程序，点击导航链接测试路由切换。