前端-Vue.js的通读使用（二）-webpack和vue-router

向右看齐 2023-07-18 06:40 62阅读 0赞

**1、webpack。**

> **1、WebPack 是一款模块加载器兼打包工具，它能把各种资源，如JS/JSX/ES6/SASS/LESS/图片等作为模块来处理和使用，**
> 
> **2、安装命令：**
> 
>     cnpm install webpack -g
>     cnpm install webpack-cli -g
> 
> **3、使用，在项目的build目录里存有webpack.base.js（基础）、webpack.dev.js（开发）、webpack.prod.js（生产）三个环境配置文件，节点说明：**
> 
>  *  **entry：入口文件，指定WebPack用哪个文件作为项目的入口**
>  *  **output：输出，指定WebPack把处理完成的文件放置到指定路径**
>  *  **module：模块，用于处理各种类型的文件**
>  *  **plugins：插件，如热更新，代码重用**
>  *  **resolve：设置路径指向**
>  *  **watch：监听，用于设置文件改动后直接打包。**
>  *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70][]
> 
>  **4、三个 webpack.xxx.conf 的区别：**
> 
> npm run build是自定义添加的命令，package.json里面：scripts中应该有build命令的详细对应命令，某种意义上这算是一种alias，一种别名，npm run build也许是用的webpack另外加了一些参数，也有可能是用其他的打包命令
> 
> 一直有点疑问webpack命名的问题，有很多的名字，也是醉了，就比如：
> 
> webpack.base.config.js  
> webpack.config.js   
> webpack.production.js  
> webpack.devserver.js  
> webpack.........  
> **查询了一下才知道：原来是随便命名的..........**
> 
> 1.这些文件都是有什么不同 ，还是随意取名？
> 
> **webpack默认只认识webpack.config.js,只有这个是默认的,只有这个是默认的,默认的...**
> 
> 名字是可以随意取的，但是我们取名是为了让一些东西有意义不是？  
> prod用于生产打包，dev用于开发打包，可以想象，prod和dev肯定有一部分配置相同，再加上一些不同的配置。所以相同的配置都放到base里面去，然后prod和dev再引入base，增加各自不同的细节。
> 
> 2.webpack怎么识别？
> 
> ## 看你的package.json，名字是可以随便取的，最终看你package.json调用哪个js，package.json的scripts里调用 ##
> 
>  3，执行npm run dev 或者  npm run build 的区别：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 1][]
> 
> ** npm run dev：可以看到，该命令加载的是webpack.dev.conf.js文件，属于开发环境。**
> 
> **npm run build： 编译时使用的build.js文件，通过build.js文件里可以看到代理加载了webpack.prod.js里面的配置，属于生产环境。**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 2][]
> 
>

** **

** ****1、vue-router。**

> **1、****Vue Router 是 [Vue.js][] 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：**
> 
>  *  嵌套的路由/视图表
>  *  模块化的、基于组件的路由配置
>  *  路由参数、查询、通配符
>  *  基于 Vue.js 过渡系统的视图过渡效果
>  *  细粒度的导航控制
>  *  带有自动激活的 CSS class 的链接
>  *  HTML5 历史模式或 hash 模式，在 IE9 中自动降级
>  *  自定义的滚动条行为
> 
> **2、安装命令：**
> 
>     cnpm install vue-router --save-dev
> 
> ** 3、创建router.config.js文件，以方便路由的管理：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 3][]
> 
> ** 4、创建两个测试组件 Home、News：**
> 
>  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 4][]
> 
>  ** 5、配置router.config.js文件进行组件加载：**
> 
>     //路由配置文件
>     
>     //导入vue和vue-router模块
>     import VueRouter from 'vue-router'
>     import  Vue from 'vue'
>     
>     //导入自定义组件
>     import Home from '../components/Home'
>     import News from '../components/News'
>     
>     //Vue启用Router
>     Vue.use(VueRouter);
>     
>     export default new VueRouter({
>       routes:[
>         {
>           //跳转url路径
>           path: '/home',
>           //对应的组件
>           component: Home
>         },
>         {
>           path: '/news',
>           component: News
>         }
>       ]
>     
>     })
> 
> ** 6、在main.js中引入router进行使用：** 
> 
>     import Vue from 'vue'
>     import App from './App'
>     
>     import router from './router/router.config'
>     
>     Vue.config.productionTip=false
>     
>     new Vue({
>       el: '#app',
>     //让vue使用router模块
>       router,
>       render: h => h(App),
>     })
> 
>  ** 7、在App.vue中引入router标签即可实现路由功能：**
> 
>  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 5][]
> 
>  
> 
>  **8、router传参的两种方式：**
> 
> 1-1、增加name属性，用来绑定跳转地址：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 6][]
> 
> 1-2、标签中进行绑定：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 7][]
> 
> 1-3、在对应页面中接受参数值：
> 
>  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 8][]
> 
>  
> 
>  
> 
> 2-1、更改props属性为true：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 9][]
> 
> 2-2、以props方式接受参数：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 10][]
> 
>  
> 
>   **9、路由的两种模式：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 11][]
> 
>

**  **

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70]: /images/20230528/4422a548e2fe482387b2494158f9515a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 1]: /images/20230528/37626ee25e0e4aee8182fbf3ab4f55ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 2]: /images/20230528/aa145a85907b4758858c1c8aadfbf8a5.png
[Vue.js]: http://cn.vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 3]: /images/20230528/262dc97ed6c84fabb5742b3cc2dfb35c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 4]: /images/20230528/ee375ffedeb341768d5f3c529b102c05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 5]: /images/20230528/869b485099304cbdb25f8e1a6bb1f7f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 6]: /images/20230528/a68a611917704c5eb09a6d5f596589e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 7]: /images/20230528/88ce6fd148d74d2391d3b6bc90ddca0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 8]: /images/20230528/4bd5503fe8f048cf9cc3d83c69ab30c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 9]: /images/20230528/21361fb98d07480bb0a656ac335c0044.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 10]: /images/20230528/bfae19dde69c44659b42f3963249454e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 11]: /images/20230528/c7018b33de7b416eb47c1cf91a6c782b.png