Vue重学之路---------一
今年7月学的Vue到现在一直没用，现在毕业设计想用Vue搭建前端页面，很多都忘记了，重新学习一下，由于之前没记笔记，这次整理放在这里，以便我以后自己查看
1、
1）项目运行自动打开浏览器
"scripts": {
"serve": "vue-cli-service serve --open", //配置项目自动运行，浏览器自动打开
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
2）eslint检验工具关闭
在根目录下创建一个vue.config.cs
modules.export={
lintOnSave:false // 关闭eslint校验工具
}
3）src文件夹目录的简写方式 （配置别名）
在根目录下创建一个jsconfig.json
{
"compilterOptions":{
"baseUrl":"./",
"paths":{
"@/*":[
"src/*" //讲@符号当作src
]
}
},
"exclude":[
"node_modules",
"dist"
]
}
2、路由
项目是上中下结构，路由组件
home首页路由组件、Search路由组件、login登录路由
非路由组件 header（只在首页和搜索页）和footer（首页、o搜索页、但是在登陆、注册页面没有）
3、前端开发项目步骤
1、编写静态页面
2、拆分组件
3、获取服务器的数据静态展示
4、完成相应的动态业务逻辑
注意：创建组件的时候，组件结构+组件样式+图片资源
4安装less
安装 5版本的，版本太高会报错
npm i --save less less-leader@5
如果想让组件识别less样式 要在 style 加上 lang="less"
5、使用非路由组件的步骤
1、创建或定义组件
2、引入
3、注册
4、使用标签的形式使用
6、路由组件的搭建
1、安装 vue-router
components放置非路由组件，pages或views防止路由组件
2、新建文件夹 router/index.js 配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入路由组件
import Home from "@pages/Home"
import Search from "@pages/Search"
import Login from "@pages/Login"
import Register from "@page/Register"
//使用插件
Vue.use(VueRouter)
//配置路由
//暴露router实例
export default new VueRouter(
{
routes:[
{
path:"/home",
component:Home
},
{
path:"/search",
component:Search
},
{
path:"/login",
component:Login
},
{
path:"/register",
component:Register
}
],
}
)
7、路由组件和非路由组件的区别
1、路由组件一般放置在pages|views文件夹下 ，非路由组件一般放置在components文件夹下
2、路由组件一般需要在router文件夹下进行注册，使用的一般是组件的名字，非路由组件在使用的时候一般是以标签的形式使用
3、$route ,$router
$route 一般通过$route 获取路由信息 [路径，query，params等等]
$router 一般编程式导航进行路由跳转
4、注册完路由，不管是路由组件还是非路由组件 身上都有$route 和$router属性
8、路由的跳转
路由的跳转有两种形式：
声明式导航 router-link ，可以进行路由的跳转
编程式导航 push|replace,可以进行路由跳转
声明式导航能做的，编程式导航都能做，编程式导航除了能做路由跳转，还可以进行其它的操作