vue项目创建步骤及路由router

当创建一个Vue项目时，需要使用Vue CLI工具。Vue CLI是一个标准化的、快速开发Vue.js应用程序的工具，具有零配置的现代Web开发工具。

当创建一个Vue项目时，需要使用Vue CLI工具。Vue CLI是一个标准化的、快速开发Vue.js应用程序的工具，具有零配置的现代Web开发工具。

以下是Vue项目创建步骤：

步骤一：安装Vue CLI

首先，需要安装Vue CLI。可以使用npm进行安装，命令如下：

npm install -g @vue/cli

步骤二：创建Vue项目

使用Vue CLI创建Vue项目的命令如下：

vue create <project-name>

例如，创建名为my-vue-app的项目：

vue create my-vue-app

在创建过程中，会提示你选择需要安装的插件和配置项，可以使用上下键选择需要的选项，最后选择“Manually select features”手动选择所需的功能，然后按Enter确定。

步骤三：启动Vue项目

创建完成后，进入项目目录并启动项目：

cd my-vue-app
npm run serve

运行成功后，将启动Vue应用程序并提供一个本地开发服务器。

路由router

Vue项目中有很多第三方路由管理库，使用较为广泛的是Vue Router。下面简单介绍如何使用Vue Router。

步骤一：安装Vue Router

使用npm安装Vue Router模块：

npm install vue-router

步骤二：创建路由

在Vue项目的src目录中新建一个“router”文件夹，然后在该文件夹中新建一个“index.js”文件，用于管理路由。

在“index.js”文件中，需要引入Vue和Vue Router模块，然后使用Vue.use()方法告知Vue使用Vue Router插件。

接下来，创建路由对象并定义路由映射。路由映射的基本格式如下：

{ path: '路由地址', component: 组件名称 }

路由映射定义完成后，需要创建路由实例并导出，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

步骤三：使用路由

在项目中使用路由时，需要在Vue组件中使用和标签进行路由跳转和路由视图渲染。

标签用于生成路由地址，并可配置路由参数，如下所示：

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

标签用于渲染路由组件，如下所示：

<router-view></router-view>

在App.vue文件中使用标签，然后就可以在该标签中渲染路由关联的组件了。

示例一：

下面以名为my-vue-app的项目为例，创建一个关于页面和一个主页。

步骤一：安装Vue Router

使用npm安装Vue Router模块：

npm install vue-router --save

步骤二：创建路由

在Vue项目的src目录中新建一个“router”文件夹，然后在该文件夹中新建一个“index.js”文件，用于管理路由。路由映射定义完成后，需要创建路由实例并导出，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

步骤三：使用路由

在App.vue文件中使用标签，然后就可以在该标签中渲染路由关联的组件了。

示例二：

下面以名为my-vue-app的项目为例，创建一个关于页面和一个主页，并带有路由参数。

步骤一：安装Vue Router

使用npm安装Vue Router模块：

npm install vue-router --save

步骤二：创建路由

在Vue项目的src目录中新建一个“router”文件夹，然后在该文件夹中新建一个“index.js”文件，用于管理路由。

在“index.js”文件中，需要引入Vue和Vue Router模块，然后使用Vue.use()方法告知Vue使用Vue Router插件。

接下来，创建路由对象并定义路由映射。路由映射的基本格式如下：

{ path: '/about/:id', component: About }

路由映射定义完成后，需要创建路由实例并导出。

示例三：具体可以参看官方文档，非常详细。
https://router.vuejs.org/zh/
https://cli.vuejs.org/zh/guide/