vue路由知识点，webpack的导入导出和配置

6.路由
6.1.1组件的路由

任务一 任务二 任务三 任务四 任务五

组件的路由案例.gif

6.1.2组件的嵌套局部案例

<div id="app">
    <ms-list :data="posts"></ms-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('ms-list',{
        props:['data'],
        template:`    <nav>
        <ul>
            <el-ms-list v-for="item in data" :title="item.title"></el-ms-list>
        </ul>
    </nav>`
    })
    Vue.component('el-ms-list',{
        props:['title'],
        template:`<li><a href="">{{title}}<a></li>`
    })
    let app = new Vue({
        el: '#app',
        data: {
            posts:[
                {id:1,title:'234123'},
                {id:2,title:'234123'},
                {id:3,title:'234123'}
            ]
        },
    })
</script>

6.1.3嵌套案例

<div id="app">
    <ms-list :data="posts"></ms-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('ms-list',{
        props:['data'],
        template:`    
        <nav>
                <ul>
                <el-ms-list :key="item.id" v-for="item in data" :title="item.title" :shuzi="item.shuzi" :author="item.author" :src="item.src"></el-ms-list>
            </ul>
        </nav>`
    })
    Vue.component('el-ms-list',{
        props:['src','title','shuzi','author'],
        template:`
            <li><img :src="src" alt=""></img>
                <div class="box">
                    <a href="">{{title}}</a>
            <span>{{shuzi}}</span>
            <h3>{{author}}</h3>
                </div>
            </li>
        `
    })
    let app = new Vue({
        el: '#app',
        data: {
            posts:[
                {id:1, src:'1.jfif', title:'中国数字化营销大会暨颁........',shuzi:'453',author:'cson直播大本营'},
                {id:2, src:'2.jfif', title:'黄东旭张文博使用BPF........',shuzi:'34',author:'homeofkernel'},
                {id:3, src:'3.jfif', title:'每周训练5小时，自信从........',shuzi:'34',author:'CSDN资讯'},
                {id:4, src:'4.jfif', title:'《大咖来了》女神节特辑........',shuzi:'243',author:'CSDN资讯'},
                {id:5, src:'5.jfif', title:'数据处理:深度解析并演........',shuzi:'45',author:'CSDN资讯'},
                {id:6, src:'6.png', title:'黑客入门必去的五个学习...........',shuzi:'32',author:'程序媛柚柚'},
                {id:7, src:'7.png', title:'开发一个小游戏能赚多少..........',shuzi:'23',author:'编程之力'},
                {id:8, src:'8.png', title:'1看电影学编程:人理解迭...........',shuzi:'53',author:'v3u.cn'},
                {id:7, src:'7.png', title:'开发一个小游戏能赚多少..........',shuzi:'23',author:'编程之力'},
                {id:8, src:'8.png', title:'1看电影学编程:人理解迭...........',shuzi:'53',author:'v3u.cn'}
            ]
        },
    })
</script>

vue路由 Vue Router
需要引入：

添加路由链接

可以使用超链接，或者使用 router-link 组件

关注
添加路由填充位

创建组件
const follow={
template:<p>111</p>
}
const follow1={
template:<p>222</p>
}
const follow2={
template:<p>333</p>
}
1.webpack
1.1按需要导出和导入
使用 export 关键字直接放到要导出的变量或者函数前面

export let a=20
导入时

import {d} from ‘./a.js’
模块中可以按需导出多个成员
模块中 export default 与 按需导出可以并存
1.2webpack的完整步骤
初始化项目 npm init -y
安装webpack
npm install webpack webpack-cli --save-dev
webpack 配置
根目录下新建 webpack.config.js

module.exports={
mode:‘development’ // 开发模式
}
配置启动命令
打开 package.json ，在 scripts 属性中加入如下代码

“dev”:“webpack”
打包
在终端中输入：

npm run dev
运行
在 index.html 中，引入 main.js，再次运行 index.html 即可成功

1.3重新配置入口文件和出口文件
const path=require(‘path’)
module.exports = {
mode:‘development’,
//入口文件
entry:path.resolve(__dirname,‘index.js’),
output:{
path:path.resolve(__dirname,‘opload’),
filename:‘mainyao.js’,
},
};
1.4自动打包
安装

npm install --save-dev webpack-dev-server
修改 pacjkage.json 中的启动命令

“dev”:“webpack serve --open”
说明：在 v5 中使用上面的 webpacl serve 命令

但是在v5之前版本中使用 webpack-dev-server 命令

运行

npm run dev
可见其在项目跟目录，所以要修改 src/index.html 的引入路径为

1.5生成预览页面
安装

npm install --save-dev html-webpack-plugin
重新运行 npm run dev后

再次访问：http://localhost:8080/，就会运行index.html

1.6 处理css文件
src 目录下新建 css 目录，新建 index.css

编写样式

• {
  margin: 0;
  padding: 0;
  }

ul {
list-style-type: none;
}

li {
line-height: 45px;
}
index.js 中导入 index.css

安装 loader

npm install --save-dev css-loader style-loader
配置 webpack.config.js

1.7处理less文件
安装

npm install less-loader less -D
rules 中增加一条规则

img

css 目录中新建 a.less

body {
background-color: #ccc;

ul {
    list-style-type: none;

    li {
        line-height: 35px;
    }
}

}
1.7处理图片
url-loader

url-loader 功能类似于 file-loader, 但是在文件大小（单位为字节）低于指定的限制时，可以返回一个 DataURL。

简单来说，就是当图片尺寸<指定的尺寸时，返回的是 base64 格式，否则返回的还是一个图片路劲

安装

npm i url-loader url-loader -D
配置 webpack.config.js

{
test:/.png$/,use:[{
loader:‘url-loader’,
options:{
limit:200000
}
}]
},
a.cs 中编写代码，为 body 设置背景图片

body {
background-image: url(…/images/11.png);
}
重新运行

npm run dev