创建vue3项目和配置路由

1. vue-cli脚手架: vue2脚手架
2. vue3脚手架: vite
3. vue官网: [介绍 — Vue.js
4. vscode插件
   • vetur 必备工具
   • vue-helper 一些辅助功能
   • Vue VSCode Snippets 片段
5. 方法和vue3一样

一.创建项目

1. 安装脚手架

   npm install -g create-vite-app
   

2. 创建项目

   create-vite-app projectName
   

3. 安装依赖

   用vscode打开项目, 运行 npm i

4. 运行项目

   npm run dev // 可以在package.json里修改
   

5. 预览项目

   用浏览器打开: http://localhost:3000

6. 以上如果用系统自带的终端下载和vscode终端下载报错就用git来下载(!注意)

二.配置路由

插件: vetur

前言#

1. 单页应用

2. 路由

3. 组件

   // html
   <template>
      <div class="box">
        {{msg}}
      </div>
   </template>
   
   // js
   <script>  
   export default {
     name: 'App', 
     data() {
       return {
         msg: 'hello world'
       }
     }
   }
   </script>
   
   // 样式 scoped意思是样式只在本组件内有效
   <style scoped>
   .box {
     color:red;
   }
   </style>
   
   

(1) 安装模块(插件)#

npm install vue-router@4

(2) 创建组件#

/src/views/home/home.vue /src/views/about/ablut.vue

<template>
    <div>home组件</div>
</template>

(3) 创建路由#

/src/router/index.js

// createRouter用来创建路由对象, createWebHistory,createWebHashHistory用来指定路由模式
import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router';

// 路由数组
const routes = [
    {
        path: '/home',
        component: ()=>import('../views/home/home.vue')
    },
    {
        path: '/about',
        component: ()=>import('../views/about/about.vue')
    }
]

// 创建路由对象
const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

(4) 挂载路由#

/src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
// 导入router
import router from './router/index'

// 挂载路由
const app = createApp(App)
app.use(router)
app.mount('#app')

(5) 配置路由出口#

/src/App.vue

<template>
  <div class="box">
    <p>
      <router-link to="/home">home</router-link>
      <router-link style="margin-left: 20px;" to="/about">about</router-link>
    </p>
    <hr />
    <!-- 路由出口 -->
    <router-view></router-view>
    <p>111111111111111111</p>
    <p>222222222222222222</p>
    <p>333333333333333333</p>
  </div> 
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "hello world",
    };
  },
};
</script> 

4) 子路由配置#

(5) active-class#

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；

<footer>
    <router-link class="item" active-class="active" to="/home">首页</router-link>
	<router-link class="item" active-class="active" to="/type">分类</router-link>
	<router-link class="item" active-class="active" to="/cart">购物车</router-link>
	<router-link class="item" active-class="active" to="/my">我的</router-link> 
	<router-link class="item" active-class="active" to="/demo">demo</router-link> 
</footer>

<style>
	footer .active {
  		color: #c03131;
	}
</style>

(6) history模式#

1. vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
2. 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
3. 使用history需要后端支持, vue-cli创建的devServer可以支持

const router = createRouter({
  history: createWebHistory(), // 使用history模式
  //history: createWebHashHistory(), // 使用hash模式
  routes,
});

(7) redirect重定向#

当访问 '/', 我们使用redirect使它默认跳到 '/product'

  {
    path: '/',
    redirect: '/product'
  },

(8) 404配置#

假如用户访问了一个没有的路由, 我们让它跳转到404页面

1. 新建NotFound.vue组件

2. 配置路由

   {
       path: "/:pathMatch(.*)",
       component: () => import("../components/NotFound.vue"),
   },