萌新小白的vue入门之旅——路由(yi)

vue项目安装

• vue create orange-shop-app // 创建项目

• 选择第二个 //第一个为默认安装 第二个为自定义安装 选择第一个和最后第三个 linter为代码规范 第一项为ES6/7转ES5的 第三项为路由

• 代码规范的标准 //倒数第二个为标准模式 第二个为最严格的

• 什么时候检测 //第一个为保存的时候检测

• 所有的依赖项安装到哪 //第一个为单独存放在一个文件夹里 第二个为安装到package.json文件中

• 以后是否使用这种配置

• 安装完成

安装完成之后的目录：

• node_modules是npm安装的依赖项

• src 是用来存放源代码

  • 主入口是main.js

  • .browserslistrc 用来做浏览器兼容问题

  • .editorconfig 用来告诉我们代码规范是怎么写的 （叫编译器格式化工具 主要针对于一个插件（editorconfig插件））是编辑器代码书写的配置文件

  • .eslintrc.js 是eslint代码规范性检测的配置文件

  • .gitignore 代码提交的过滤文件 过滤掉项目里面不需要提交到仓库的代码

  • README.md 说明文件

    vue项目发布

vue项目发布

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

• dist文件夹就是以后要发布的文件夹 发布的时候还需要加一个配置文件（vue.config.js）

• vue.config.js （是vue脚手架的配置文件，这个是用来配置vue项目的）

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

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

  里面有很多配置，但是用得上的最多的就是publicPath

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

• 当上面报代码格式错误的时候就使用使用prettier - Code formatter插件

  • 先创建一个配置文件（.prettierrc）(这个配置文件是写格式化代码的方式)

  • {
    	"singleQuote":true,
    	"semi":false
    }
    

  • 写好之后在执行npm run build

• public表示公共文件夹 以后用来发布的时候用来生成的静态资源 主入口是index.html

路由

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


安装完成之后 在main.js中
import Vue form 'vue'
// 引入路由
import VueRouter from 'vue-router'

// 使用路由
Vue.use(VueRouter)

// 定义一个路由实例
const router = new VueRouter({
  routes: [			//定义一个路由内容
    {
      path: '', // 路径，就是url中访问的地址
      name: '', // 名字，就是我为这个路由设置一个名字
      component: '' // 组件，当浏览器中访问对应的地址时展示的内容
      //component:() => import('./pages/List') 	这种方式是异步引入路由，当访问到此地址的时候才会引入文件 
      //异步方式引入的路由组件会在打包的时候生成单独的js文件
      // 在使用的时候才会被加载，此方法主要用来做性能优化
    }
  ] //  表示路由配置表
})

//把组件注册进来
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

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

• $route

  表示当前的路由信息，有path（地址），params（路由传参），query（url传参）等参数信息

• $router

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

路由中内置组件

//当我们使用了Vue.use的时候  会帮我们自动注册两个全局自定义组件：router-link和router-view

<router-link :to="{name:'H'}"></router-link>		//这个是用来生成a标签 做页面跳转   
  // to表示跳转到哪里  
  // H表示上面定义的那个name	
  // :to="{name:'H'}"也可以根据path去跳转 更换为 to="/l"  但是不建议用path去跳转

<router-view><router-view>		//是用来展示组件的内容的,路由跳转之后的组件页面内容都在此进行展示，所有的路由地址访问时对应的内容都在组件的范围内显示