webpack -- 自定义Vue操作 · Vue&&TypeSprict--基础总结

[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把组件对象暴露出去 ~~~ ~~~ <template> <div> <h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1> </div> </template> <script> export default { data() { // 注意：组件中的 data 必须是 function return { msg: "123" }; }, methods: { show() { console.log("调用了 login.vue 中的 show 方法"); } } }; </script> <style> </style> ~~~ >[danger] ##### 为什么页面中有个app.vue的文件 ~~~ 1.首先如果没有app.vue文件，我们在main.js 也就打包文件中引入Vue实例对象，也在我们将要渲染的页面index.html 加上了绑定的el，但是render渲染的页面，只会render的数据，其他数据都会被覆盖，例如： <div id="app">  <a></a>  <login></login> </div> 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写的内容: <template> <div> <h1>app.vue</h1> <router-link to="/account" tag="span">登录</router-link> <router-link to="/goodslist">注册</router-link> <router-view></router-view> </div> </template> <script> </script> <style lang="scss" scoped> </style> 5.在index.html绑定的vue，dom中写的内容 <div id="app"> <app></app> </div> ~~~ >[danger] ##### 配置路由 ~~~ 1.npm install vue-router 2.// 1. 导入 vue-router 包 import VueRouter from 'vue-router' // 2. 手动安装 VueRouter Vue.use(VueRouter) 3.记得在vue实例去绑定这个路由 ~~~ >[danger] ##### 向后台项目一样吧路由抽离 ~~~ 1.在main.js 带编译js 中创建vue实例对象，使用render 渲染总的组件 2.路由负责处理个个组件，单个组件可以依靠路由委托在总组件中 ~~~ ~~~ import VueRouter from 'vue-router' // 导入 Account 组件 import account from './main/Account.vue' import goodslist from './main/GoodsList.vue' // 导入Account的两个子组件 import login from './subcom/login.vue' import register from './subcom/register.vue' // 3. 创建路由对象 var router = new VueRouter({ routes: [ // account goodslist { path: '/account', component: account, children: [ { path: 'login', component: login }, { path: 'register', component: register } ] }, { path: '/goodslist', component: goodslist } ] }) // 把路由对象暴露出去 export default router ~~~ >[success] # 这里还是要强调下 ~~~ 1.在整个项目src目录中的js和html 都是我们配置webpack打包的目标文件，也就是我们所说的入口文件，正因如此我们将一些引入包最后都汇集在这里 2.render 会把 el 指定的容器中，所有的内容都清空覆盖，所以不要把路由的 router-view 和 router-link 直接写到 el 所控制的元素中 3.组件，是通过路由匹配监听到的，所以组件，只能展示到属于路由的 <router-view></router-view> 中去； ~~~