Vue加深-CFANZ编程社区

vue-cli

什么是vue-cli

vue-cli 官方提供的一个脚手架，用于快速生成一个vue的项目模板；

预先定义好的目录结构及基础代码，就好比咋们在构建maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，方便我们快速开发

主要功能

统一的目录结构
热部署
单元测试
集成打包上线

安装步骤（老版）

安装node.js
管理员运行：全局安装cnpm: npm install cnpm -g
- C:\Program Files\nodejs\node_global\cnpm -> C:\Program Files\nodejs\node_global\node_modules\cnpm\bin\cnpm cnpm@7.1.1
全局安装vue-cli：cnpm install vue-cli -g
vue list 查看可安装的模板打包工具

新建项目步骤

管理员打开文件夹目录
vue init webpack myvue ：初始化
默认全部回车，增加体验感全部选no（这里注意目录级别）
npm install :安装依赖环境
按警告命令修复：npm audit fix
npm run dev启动:webpack自动打包运行

npm install -g @vue/cli //下载最新版vue
vue --version //查看vue版本@vue/cli 5.0.4
新建项目参考网址：https://blog.csdn.net/lyww1992/article/details/107533176
运行：npm run serve
npm install vue-router@4 //vue-router下载

Webpack

一个现代JavaScript应用程序的静态模块打包器，当下最热门的前端资源模块化管理和打包工具

代码解析

exports ：入口文件，指定webpack中用哪个文件作为项目入口
output ：输出，指定webpack 把处理完成的文件放置到指定路径
moudle：模块，用于处理各种类型的文件
plugins：插件，如：更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包
webpack.config.js中
- entry: ‘./modules/main.js’,
- output: {filename: “./js/bundle.js”}

vue-router路由

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

功能：

App.vue

<template>
<div id="app">
  <h1>renjianyong</h1>
  <router-link to="/">去home</router-link>
  <router-link to="/about">去about</router-link>
  <router-view></router-view>
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
}
</script>

main.js

import { createApp } from 'vue'
import {createRouter,createWebHistory} from 'vue-router'
import Test1 from './components/Test1.vue'
import App from './App.vue'

const Home = import('./components/Home.vue');
const About = import('./components/About.vue');

const routes = [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
        path: '/test1',
        component: Test1
    }
  ];
  
/**
 * 创建路由
 */
 const router = createRouter({
  // hash模式：createWebHashHistory，
  // history模式：createWebHistory
  history: createWebHistory("/"),
  // history:createWebHashHistory(),
  routes,
});

createApp(App).use(router).mount('#app')

引入ElementPlus

版本高，下载高版本的
npm install element-plus --save
引入
import ElementPlus from ‘element-plus’
import ‘element-plus/theme-chalk/index.css’
app.use(ElementPlus);

更新后代码：

import { createApp } from 'vue'
import {createRouter,createWebHistory} from 'vue-router'
import Test1 from './components/Test1.vue'
import App from './App.vue'
import Main from './views/Main.vue'
import Login from './views/Login.vue'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
const Home = import('./components/Home.vue');
const About = import('./components/About.vue');

const routes = [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
        path: '/test1',
        component: Test1
    },
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ];
  
/**
 * 创建路由
 */
 const router = createRouter({
  // hash模式：createWebHashHistory，
  // history模式：createWebHistory
  history: createWebHistory("/"),
  // history:createWebHashHistory(),
  routes,
});
// createApp(App).use(router).mount('#app')
const app=createApp(App);
app.use(router);
app.use(ElementPlus);
app.mount('#app');

参数传递并获取

路由网址声明（加入props两种方式都可获取）：{

path: ‘/login/:id’,

component: Login,

props: true

}
访问网址：login/2

获取参数：

//直接获取
<h2>{{ $route.params.id}}</h2>
//通过props获取
<h2>{{id}}</h2>
export default {
    props: ['id'],
}

重定向

路由中加入redirect

钩子函数

beforeRouteEnter:(to,from,next)=>{console.log(“进入路由之前”);next();}
进入路由之前，拦截器
beforeRouteLeave:(to,from,next)=>{console.log(“进入路由之前”);next();}
进入路由之后
next()、next(’/false’)