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(路由对象)实现跳转