Vue CLI is committed to
standardizing the tool foundation in the Vue ecosystem. It ensures that various construction tools can be smoothly connected based on smart default configurations, so that you can focus on writing applications instead of having to spend days struggling with configuration issues. At the same time, it also provides the flexibility to adjust the configuration for each tool without
eject.
Official document address: https://cli.vuejs.org/zh/guide/
1. Create a Vue CLI 4.5.7 scaffolding project
1. Create a new Vue CLI scaffolding project through Webstorm npx
2. The default directory structure is shown in the figure
3. Open the command line and use to npm ls --depth 0view the default dependencies of the project
4. Use the npm run serverunning project, the default port is 8080
Two, the basic use of Vue Router
Vue Router is the official route manager of Vue.js. It is deeply integrated with the core of Vue.js, making it easy to build single-page applications. The functions included are:
- Nested routing/view table
- Modular, component-based routing configuration
- Routing parameters, queries, wildcards
- View transition effect based on Vue.js transition system
- Fine-grained navigation control
- Link with automatically activated CSS class
- HTML5 history mode or hash mode, automatically downgrade in IE9
- Custom scroll bar behavior
Official document address: https://router.vuejs.org/zh/
1. Installation Vue Router
npm install vue-router
2. Create a new js file
3. Write routing
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. Mount the route to the root instance
editmain.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. Edit the root component App.Vue
<template>
<div id="app">
<!-- 路由匹配到的组件将显示在这里 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
<router-view>It is the top-level exit, rendering the components matched by the top-level routing. Similarly, a rendered component can also contain its own nesting <router-view>.
To render components in a nested exit, you need to use the children configuration in the parameters of VueRouter. The children configuration is a routing configuration array like the routes configuration, so you can nest multiple layers of routing.
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
Like, favorite, follow, your support is my biggest motivation!