关于Vue的路由脚手架笔记

Posted 2020-09-20 嘉爷

在页面引入vue-router.js文件，开始配置路由

 

<div id="box">

<ul><li> <a v-link="{path:‘/home‘}">主页</a> </li>  //点击跳转路由

 <li> <a v-link="{path:‘/news‘}">新闻</a></li>  

</ul>

<div> <router-view></router-view> </div>       //路由显示区域

</div>

 

<script>

var App=Vue.extend();          //1. 准备一个根组件（总的组件）

var Home=Vue.extend({        //2. 为Home News组件定义模版准备

template:‘<h3>我是主页</h3>‘

});

var News=Vue.extend({

template:‘<h3>我是新闻</h3>‘

});

var router=new VueRouter();   //3. 准备路由，实例化一个路由

//4. 关联

router.map({                //使用router.map将模版进行关联

‘home‘:{                    //设置跳转名称‘home

component:Home       //绑定到定义好的模版

},

‘news‘:{

component:News

}

});

router.start(App,‘#box‘);  //5. router.start启动路由，绑定总组件到指定元素

router.redirect({  ‘/‘ : ‘/home‘  });         //6. router.redirect默认跳转

</script>

 

 

 

路由的嵌套：在关联路由的模版内使用  subRoutes

<template id="home">     //父级路由的模版

<h3>我是主页</h3>

<div>                 //内部嵌套路由

<a v-link="{path:‘/home/login‘}">登录</a> //注意子路由的路径

<a v-link="{path:‘/home/reg‘}">注册</a>

</div>

<div>

<router-view></router-view>

</div>

</template>

 

router.map({     //4. 关联路由

‘home‘:{

component:Home,

subRoutes:{     //在模版内部使用subRoutes定义子路由模版

‘login‘:{

component:{

template:‘<strong>我是登录信息</strong>‘

}

},

‘reg‘:{

component:{

template:‘<strong>我是注册信息</strong>‘

}

}

}

},

‘news‘:{

component:News

}

});

 

路由链接后面带参数获取：$route.params

<a v-link="{path:‘/news/detail/001‘}">新闻001</a>

<a v-link="{path:‘/news/detail/002‘}">新闻002</a>   //跳转链接后面带参数

 

‘news‘:{

component:News,

subRoutes:{

‘/detail/:id‘:{     //在定义的路由跳转名称后面加：名称

component:Detail

}

}

}

 

以下方法返回的都是一个JSON对象，需要过滤转化

{{$route.params | json}}          //获取当前路由链接地址后的参数

{{$route.path}}                // 获取当前路由链接的路径

{{$route.query | json}}           //获取当前路由链接？后面的数据

 

 

 

 

Vue-loader的使用：

 

vue文件内容介绍:    放置的是vue组件代码

 

<template> html文本  </template>

<style>   css文本 </style>

<script>   js文本 （平时代码、ES6） </script>

 

Vue-loader简单的目录结构:

index.html         主页面

main.js            入口文件，为webpack打包准备

App.vue         vue文件组件，官方推荐命名法，第一个字母大写

package.json     工程文件(放置项目依赖、名称、配置)

webpack.config.js webpack配置文件

 

ES6语法: 模块化开发思想

导出模块：  export default {}

引入模块:    import 自定义模块名 from 地址

 

npm init --yes   该指令可生成package.json文件

--save-dev  :  将下载的文件写入配置文件中的"devDependencies"

--save：       将下载的文件写入配置文件中的"dependencies"

 

使用Vue-loader的准备工作：

1、下载webpack：   出现node_modules文件

npm install webpack --save-dev    不带服务器的版本

npm install webpack-dev-server --save-dev    带服务器的版本

 

在package.json中的“scripts”对象中，配置好运行打开监听端口指令，--port 8082为自定义端口，默认为8080端口

  "scripts": {

    "dev": "webpack-dev-server --inline --hot --port 8082"

  },

 

在命令行打开文件目录，输入npm run dev   

在浏览器打开http://localhost:8082/   即可访问

 

2、下载vue-loader ：  node_modules文件内出现vue-loader文件

vue-loader可以将App.vue等文件编译成正常文件

npm install [email protected] --save-dev     使用8.5.4 版本

 

3、下载解析vue文件内部HTML、CSS、JS所需要的模块

vue-html-loader                解析HTML部分

css-loader、vue-style-loader    解析style部分

[email protected]       解析JS部分，使用1.3.2 版本

 

cnpm install vue-html-loader  css-loader  vue-style-loader [email protected]  --save-dev  一次性下载所有loader

 

4、下载babel-loader 以及需要的各个babel插件

babel-loader   可以把ES6语法编译成ES5语法的模块

babel-loader

babel-core

babel-plugin-transform-runtime

babel-preset-es2015

babel-runtime

npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev

 

5、下载[email protected]

npm install [email protected] --save

 

模块化开发，加入路由：配合vue-loader使用

1、下载[email protected]模块

npm install [email protected] --save-dev

 

2、在入口文件里引入vue-router并使用

import VueRouter from ‘vue-router‘

Vue.use(VueRouter);

 

3、在入口文件中配置路由

var router=new VueRouter();

router.map({

路由规则

})

router.start(App,‘#app‘);

 

 

注意事项：

使用了路由后，原本index.html文件中的<app></app>改变

变成<div id="app"></div>，

App.vue文件中的模版需要一个 <div id="app"></div>作为父元素包裹

 

关于项目的打包上线：

在package.json文件文件增加"build":"webpack -p"

命令行执行  npm run build

 

关于vue-cli 脚手架：帮助你搭好基本的项目结构

提供了多种模版：

simple 最简单的模版，只具备基本的语法

webpack 集合多种功能，如Eslint 检查代码规范，单元测试

webpack-simple     没有代码检查

基本使用流程:

1. npm install vue-cli -g            安装 vue命令环境

如何验证安装ok?        vue --version       教程使用2.4.0

 

2. 生成项目模板

vue init <模板名> 本地文件夹名称

例如：vue init simple#1.0  simple-test

vue init webpack#1.0 webpack-test

vue init webpack-simple #1.0 webpack-simple-test       

端口号 config/index.js里面修改

 

3. 进入到生成目录里面   cd xxx

4. 按照依赖项 npm install

5. npm run dev

 

 

如何在脚手架里面使用less

1、安装需要使用到的less模块和less-loader模块

   并在wenpack.config.js里面配置

命令行：npm i install less less-loader --save-dev

配置： { test: /\.less$/, loader: ‘less‘}

2、在<style></style>标签中加入 lang=”less”

lang=”less”  表示声明语言

scoped     表示局部的，里面的样式只有当前文件可以使用

 

 

如何在脚手架里面使用scss

安装node-sass ,sass-loader,vue-style-loader，css-loader

lang=“scss”

 

 

npm install vue-cli -g

vue init webpack-simple #1.0 webpack-simple-test  

npm install vue-router --save

cd vue-test

 npm install

npm run dev.