v u e

vue-cli

安装npm install -g @vue/cli

检查版本vue --version

项目依赖
用法： upgrade [options] [plugin-name]
（试用）升级 Vue CLI 服务及插件
选项：
-t, --to 升级 到指定的版本
-f, --from 跳过本地版本检测，默认插件是从此处指定的版本升级上来
-r, --registry 使用指定的 registry 地址安装依赖
–all 升级所有的插件
–next 检查插件新版本时，包括 alpha/beta/rc 版本在内
-h, --help 输出帮助内容

创建项目：vue create hello-world

用法：create [options]

创建一个由 vue-cli-service 提供支持的新项目

vue create选项：

-p, --preset 忽略提示符并使用已保存的或远程的预设选项
-d, --default 忽略提示符并使用默认预设选项
-i, --inlinePreset 忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager 在安装依赖时使用指定的 npm 客户端
-r, --registry 在安装依赖时使用指定的 npm registry
-g, --git [message] 强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git 跳过 git 初始化
-f, --force 覆写目标目录可能存在的配置
-c, --clone 使用 git clone 获取远程预设选项
-x, --proxy 使用指定的代理创建项目
-b, --bare 创建项目时省略默认组件中的新手指导信息
-h, --help 输出使用帮助信息

使用图形化界面:vue ui

eslint

vscode自动修复eslint安装eslint插件，并启用[文件]=>[首选项]=>[设置]=>用户，找到setting.json,加上以下配置

"editor.codeActionsOnSave":{
"source.fixAll":true
}

反向代理&别名

首先找到 vue.config.js文件

module.exports = {
  // devServer的配置
  devServer: {
    // 自定义端口
    port: 8000,
    // 自动打开浏览器
    open: true,
    // 用于配置反向代理
    proxy: {
      // 代理请求， 匹配所有以/api开头的请求
      '/api': {
        // 目标服务器，所有以/api开头的请求接口代理到目标服务器
        target: 'http://touxxxxxx.itheima.net/',
        // 重写路径，此时用于匹配反向代理的/api可以替换为空
        pathRewrite: { '^/api': '' },
        // 如果代理到HTTPS服务器需要设置secure为true，默认为false
        secure: true
      }
    }
  }
}

在request.js里面配置

const request = axios.create({
  // baseURL: 'http://ttapi.xxxx.itcast.cn/',
  // baseURL: 'http://xxxxxx.itheima.net/',
  // 将所有的请求全部以/api开头，用于匹配反向代理
  baseURL: '/api',
  // 超时， 如果接口超过3000毫秒，直接失败
  timeout: 3000,
  }）

别名：

新建一个配置文件 名字必须为  vue.config.js

添加以下内容

const path = require('path');//引入path模块
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
        .set('@',resolve('src'))
        .set('assets',resolve('src/assets'))
        .set('common',resolve('src/common'))
        .set('components',resolve('src/components'))
        .set('network',resolve('src/network'))
        .set('views',resolve('src/views'))
        //set第一个参数：设置的别名，第二个参数：设置的路径
    }
}

配置成功后重启项目

  引入css样式, css样式表别名的前面需要添加 '~'
  在js中引入也需要添加~
// vue引入
@import '~style/index.less';
// js中引入
import '~style/index.less'

/* 引入组件,  */
import Box from 'components/Box'

spa&路由引入

SPA（单页面应用程序），项目中只需要1个html页面，多个功能组件，页面跳转其实就是切换组件。

单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数 据, 展示在页面中
传统多页面应用程序：对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势:减少了请求体积，加快页面响应速度，降低了对服务器的压力(以前的开发是jsp,现在是html–静态页面不用访问服务器) 更好的用户体验，让用户在web app感受native app的流畅

重定向

当进入页面时，你希望第一个跳转出的是你主页面或者是子页面时

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
Vue.use(VueRouter)
const routes = [
  //重定向操作
  {path:'/',redirect:'/login'},
  {path:'/login',component:Login}
]
const router = new VueRouter({
  routes
})
export default router

重定向操作{path:'/',redirect:'/login'}

声明式导航

<router-link to="路径"> </router-link>

作用:

1.更方便的实现路由跳转, 不需要想要不要加 #, 还会自动添加高亮的类名

2.自动添加类名 router-link-active 模糊匹配 router-link-exact-active 精准匹配

3.router-link实质上最终会渲染成a链接 to属性等价于提供 a 标签 href属性(to无需#)

说明:

1.router-link是 VueRouter提供的全局组件 本质就是a标签

2.router-link当标签使用 必须传入to属性 指定路由路径值

注意: to属性设置跳转路径

嵌套路由

通过 Vue Router，你可以使用嵌套路由配置来表达这种关系

命名：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [{ path: '', name: 'user', component: UserHome }],
  },
]

编程式导航

不可跳转到指定路径:
向前或向后跳转n个页面，n可为正整数或负整数

this.$router.go(-1);//后退一页
1

可跳转到指定路径：

this.$router.push('/');(不携带数据跳转，一般可以直接跳转到登录页)
this.$router.replace('/');(不携带数据跳转，一般可以直接跳转到登录页)
this.$router.push('/xxx')(不携带数据跳转)
this.$router.push({path:'/xxx'})(不携带数据跳转)
this.$router.push({name:'xxx'})(不携带数据跳转，路由里需要配置name)
this.$router.push({path:'/xxx',query:{data:'data'}})//类似get请求  数据会暴露在地址栏  (携带数据跳转)
this.$router.push({name:'xxx',params:{data:'data'}})//数据不在地址栏  (携带数据跳转，路由里需要配置name)

动态路由

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()

调用 router.replace()

router.addRoute({ path: '/about', component: About })
// 我们也可以使用 this.$route 或 route = useRoute() （在 setup 中）
router.replace(router.currentRoute.value.fullPath)

通过使用删除路由

router.removeRoute()

按名称删除路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用Symbol作为名字。

当路由被删除时，所有的别名和子路由也会被同时删除

路由拦截

通过vue-router的beforeEach方法进行每一次路由访问的拦截，判断拦截信息中是否有鉴权要求或者权限校验，以此来实现鉴权 如果权限不够，访问的路径虽然存在但会被拦截。

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

component (和 components) 配置接收一个返回 Promise 组件的函数 Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。这意味着你也可以使用更复杂的函数，只要它们返回一个 Promise ：

const UserDetails = () =>
  Promise.resolve({
    /* 组件定义 */
  })