vue相关知识点

vue项目发布

npm run build # 把vue项目进行打包发布，生成可以在web服务器中进行访问的网页
# 我们写的.vue文件是源代码，是不能被浏览器解析的
# 我们在开发的时候使用了cli脚手架生成项目,当执行npm run server的时候
#   cli搭建的项目会自动启动内置的开发服务器,是临时的一个服务器
#   会把我们写的vue文件进行编译运行
#   .vue文件在开发的时候能够在浏览器被访问到，是因为有webpack的存在
#   webpack是一个前端模块化开发工具，可以实现模块化开发和临时的开发服务器
#   .vue文件能够被webpack加载，是因为vue-loader插件的功劳
#   webpack内置了很多插件(加载器),作用是解析不同的文件类型

配置文件

• vue.config.js

  是vue脚手架的配置文件，这个是用来配置vue项目的

  https://cli.vuejs.org/zh/config/

  里面有很多配置，当时用得上的最多的就是这个 publicPath

  publicPath的作用是设置一下当前项目发布之后静态资源引入的路径，一般设置为./

  module.exports = {
    publicPath: './' // 设置当前项目发布时候静态资源引入的路径
  }

   

• .eslintrc.js

  是eslint代码规范性检测的配置文件

• .editorconfig

  是编辑器代码书写的配置文件

• .prettierrc

  是prettier代码格式化插件的配置文件

vue路由

npm i vue-router # 安装路由插件

当我们使用了路由组件之后会自动的注册两个全局组件到项目中

router-link,是用来生成a标签的组件，做页面跳转

router-view，是用来展示路由对应的内容的组件，所有的路由地址访问时对应的内容都在组件范围内显示

使用

import Vue from 'vue'
import VueRouter from 'vue-router'
​
Vue.use(VueRouter)
​
const router = new VueRouter({
    routes: [....] // 定义一个路由内容
})
​
new Vue({
  router, // router: router
  render: h => h(App)
}).$mount('#app')
​

每一个路由对应的页面中都会包含一些路由属性

• $route

  表示当前的路由信息，有path，params，query等参数信息

• $router

  是一个vue的路由对象，里面包含有一个路由的常见方法，比如push，replace，add等

params传参和query传参

是路由传参的两种常见形式。区别在于

• query传参，参数在url中可见，是标准的url传参形式。使用?分割参数和url地址

• params传参，参数在url默认是不可见的。除非设置了占位符

• query传参不怕刷新，刷新之后参数还在

• params传参除非设置了占位符，否则参数不能在刷新之后保存

编程式跳转

使用this.$router.push(路由对象)实现跳转