webpack — 自定义Vue操作
最后更新于：2022-04-02 08:08:27
[TOC]
>[success] # webPack -- 自定义Vue操作
~~~
1.首先需要理解webpack--自定义配置章节中的
1.1'node 的包查找规则'
1.2'Runtime Only和Runtime+Compiler',
1.3'为什么使用的是render',
1.4'es6 导出和node导出'
2.一定不要迷糊在webpack中，main.js或者是js的文件入口不管他叫什么，为什么
在哪里写的原因是，在打包的时候配置了要被打包的文件，这个如果就是被打包的
文件，所以所有东西最后到在这导入。
3.index.html 甚至其他名字的总html，为什么叫html入口，也是因为配置，文件最
后配置的html会在这集成。
~~~
>[info] ## 开始配置
~~~
.
├── dist // 打包后的文件
├── src // 源码文件
| ├── css
| └── js
| └── components // 存放组件的文件夹
| └── index.html // 这是打包后显示的html总文件
| └── App.vue //所有组件路由在这在App.vue
| └── main.js // 这是 main.js 是我们项目的JS入口文件
├── package.json // npm init 生成的NPM包的所有相关信息，其中sprict可以脚本
├── .babelrc //将高级语法转换成低级语法
└── webpack.config.js // 配置webpack的配置文件
~~~
>[danger] ##### 说明
~~~
1.根据'前端知识扩展' -- webpack 配置篇完成基础配置后，在根据vue配置进行单独
配置。
~~~
>[danger] ##### 开始
~~~
1.安装vue ： npm i vue -S
2.我们写的vue组件都会以.vue形式结尾，已经在'前端扩展'中提到，webpack是基
于node，也就是说node 只认识'.js''.node''.json' 结尾的文件想使用就给配置：
npm i vue-loader vue-template-compiler -D // 这里安装了两个包因为vue-loader 依赖vue-template-compiler 所以安装两个
3.在webpack.config.js 的module节点下rules数组配置是哪个vue的编译规则
{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
~~~
>[danger] ##### 对于使用import 导入vue注意点：
~~~
import Vue from 'vue'
1.根据上面的查找规则在vue在main属性中的入口文件不是功能完整的文件，
导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有
提供 像网页中那样的使用方式
2..因此解决方法有三种：
4.1 改变main 参数的入口文件地址改成vue.js
4.2 导入使用地址方式的引入，明确具体文件import Vue from '../node_modules/vue/dist/vue.js'
4.3在webpack.config.js 文件中配置节点点引入
resolve: {
alias: { // 修改 Vue 被导入时候的包的路径
"vue$": "vue/dist/vue.js"
}
}
3.但是正常情况下我们是不会去改变的而是使用render 去渲染，不会做上面三种
特别的配置
~~~
* 使用render 渲染如下
~~~
import Vue from 'vue'
// 导入的组组件
import login from './login.vue'
var vm = new Vue({
el:"#app",
data:{
msg:"123"
},
// 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
// 用render 渲染的组建
/* render: function (createElements) {
return createElements(login)
} */
// 缩写
render: c => c(login)
})
~~~
>[danger] ##### 在vue中.vue 结尾的组件格式如何书写
~~~
1.组件vue-loader会把这三部分整合在一起
2.使用export default把组件对象暴露出去
~~~
~~~
~~~
>[danger] ##### 为什么页面中有个app.vue的文件
~~~
1.首先如果没有app.vue文件，我们在main.js 也就打包文件中引入Vue实例对象，
也在我们将要渲染的页面index.html 加上了绑定的el，但是render渲染的页面，只
会render的数据，其他数据都会被覆盖，例如：
2.因此创建了一个app.vue 文件在目录下，这样在main.js 渲染的是我们的app.vue
组件，我们在app.vue 这个组件中绑定路由，这样在index.html中只要渲染
app.vue组件，砸死app.vue 整合其他组件：
3.刚才说了这么多让我们重新看一下，按照新 思路写的mian.js 中的vue实例
import app from './App.vue'
var vm = new Vue({
el: '#app',
render: c => c(app),
router // 4. 将路由对象挂载到 vm 上
})
4.看一下在app.vue写的内容:
登录
注册
';