Vue CLI 4.5.7 脚手架项目的搭建、目录结构分析、Vue Router的基本使用

2023-11-13 20:02:09

Vue CLI 致力于将 Vue
生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个
工具提供了调整配置的灵活性，无需
eject。

官方文档地址：https://cli.vuejs.org/zh/guide/

一、创建Vue CLI 4.5.7 脚手架项目

1. 通过Webstorm npx方式新建一个Vue CLI脚手架项目

2. 默认目录结构如图所示

3. 打开命令行，使用`npm ls --depth 0`查看项目默认依赖

4. 使用`npm run serve`运行项目，默认端口为8080

二、Vue Router的基本使用

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

官方文档地址：https://router.vuejs.org/zh/

1. 安装 `Vue Router`

npm install vue-router

2. 新建js文件

3. 编写路由

import VueRouter from 'vue-router'
import Vue from 'vue'
import Login from "@/components/Login";
// 使用VueRouter
Vue.use(VueRouter);
// 定义路由
const routes = [
    {
        path: '/',
        component: Login
    }
];
// 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
    routes
});
// 暴露接口
export default router;

4. 挂载路由到根实例

编辑main.js

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
// 关闭生产模式下的提示
Vue.config.productionTip = false;

new Vue({
    // 挂载里路由到根实例
    router,
    render: h => h(App),
}).$mount('#app');

5. 编辑根组件App.Vue

<template>
    <div id="app">
        <!-- 路由匹配到的组件将显示在这里 -->
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        name: 'App',
    }
</script>

<style>
</style>

<router-view> 是最顶层的出口，渲染*路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置，children 配置就是像 routes 配置一样的路由配置数组，所以可以嵌套多层路由。

import VueRouter from 'vue-router'
import Vue from 'vue'
import Login from "../components/Login";
import Home from "../components/Home";
import UserList from "../components/user/UserList";
import SensitiveWord from "../components/sensitive-word/SensitiveWord";
import Report from "../components/report/Report";
import FileInfo from "../components/file-info/FileInfo";
import Register from "../components/Register";

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: Login
    },
    {
        path: '/register',
        component: Register
    },
    {
        path: '/home',
        component: Home,
        children: [
            {
                path: '/userList',
                component: UserList
            },
            {
                path: '/sensitiveWord',
                component: SensitiveWord
            },
            {
                path: '/report',
                component: Report
            },
            {
                path: '/fileInfo',
                component: FileInfo
            }
        ]
    }
];

const router = new VueRouter({
    routes
});

export default router

原文链接：https://blog.csdn.net/y1534414425/article/details/109127793

码农公寓