学习内容
⊙ 配置Vue
⊙ el和template的区别
⊙ 认识plugin
⊙ 搭建本地服务器
⊙ 配置文件的分离
啊,今天运行昨天的程序结果疯狂报错,气死我了
配置Vue
后续项目中,我们会使用Vuejs进行开发,而且会以特殊的文件来组织Vue的组件
所以,下面我们来学习一下如何在我们的webpack环境中集成VueJS
现在我们希望在项目中使用Vue,那么必然需要对其有依赖,所以需要先进行安装
注意: 因为我们后续是在实际项目中也会使用Vue的,所以并不是开发时依赖,所以不用加-dev
npm i vue --save
现在开始使用Vue
在入口文件main.js中写我们的Vue实例,因为现在用的是npm而不是cdn引入,所以需要import 一下
在index.html里写一个div
run以后运行会报错
原因有点难解释, 直接说解决办法吧
到webpack.config.js中加上这几条代码即可
现在就可以了
el和template
我们来考虑另外一个问题:
由于不想频繁的更改index.html的内容,所以将里面的内容删除
index.html
写在main里面的template里
main.js
然后再运行的时候,vue会自动帮我们把template里面的内容放到index.html里面
index.html
试着运行一下:
就是说同时有el和template的话,template会将el的内容替换掉
所以现在又要抽离一下了
我们在Vue实例中注册子组件App,子组件里面包含着html的一些结构,但是Vue实例中的template会将App里面的内容直接替换掉index.html中<div id='app'></div>的标签
嗯...就是以前的<App>会放在↓
现在放到了↓
另外<App/>就是<App></App>
接下来还要继续抽取
在src文件夹下面创建一个vue文件夹,里面创建一个app.js
导出这一块代码
在main.js中引用:
run一下就能运行了,效果就不展示了,因为还可以继续抽到vue里面
现在终于到了使用.vue文件的时候
还是在vue文件夹里面,创建一个App.vue文件
下载一个叫'vetur'的插件
在.vue文件中输入vue就会出来模板
这个时候是会报错的,提示我们需要vue-loader
npm install vue-loader@15.4.2 --save-dev
npm install vue-template-compiler@2.5.21 --save-dev
然后还是进行配置
现在重新run一下看看效果
还可以像之前一样在组件里面注册子组件
创建Cpn.vue文件
App.vue
run一下:
不得不感叹真的好牛逼啊...
plugin
我们来学习一个最简单的插件: BannerPlugin,为打包的文件添加版权声明,属于webpack自带的插件
webpack.config.js
run以后来看看我们的bundle.js
安装插件:
npm install html-webpack-plugin@3.2.0 --save-dev
就是说在我们run了以后,会在dist文件夹下也创建一个index.html文件(为了后续的发布,所以要放在这个文件夹下),使用这个插件就能帮我们自动创建
使用:
注意,这一条可以删除,因为后面会自动创建
webpack.config.js
run一下看看效果
已经生成了
dist文件夹下的index.html
在项目发布之前,我们必然要对js等文件进行压缩处理,需要使用uglifyjs-webpack-plugin
安装:
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
接下来就是配置:
webpack.config.js
run以后的结果:
所以我们之前的版权声明啥的也没用了,因为丑化时会将我们的注释给去掉,这两个只能用一个
搭建本地服务器
我们每次修改完代码以后想要看到效果,都要重新run一次,非常非常的麻烦
webpack提供了一个可选的本地开发服务区,这个本地服务器基于node.js搭建,内部使用express,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果
不过它是一个单独的模块,在webpack中使用要先安装
npm install --save-dev webpack-dev-server@2.9.1
但是现在还不能运行,因为终端中运行是在全局的环境下的,所以现在要去配置一下
package.json
现在可以run dev了
效果:
加上open可以自动打开浏览器
配置文件的分离
当我们在开发时,其实有一些配置是不需要的,比如:
丑化和自动在dist下生成index.html,所以我们现在要对这些配置做一个抽离,把开发和发布时的配置分离
创建文件夹和文件
base就是放一些不管是开发时还是生产时都需要的配置:
base.config.js
dev.config.js
开发时配置
这个就是搭建的本地服务器,做测试用的,所以只在开发时有用
prod.config.js
生产时配置,最终编译时的配置
那我们开发时就需要这两个文件
生产时需要的文件
所以现在要将他们合并起来
安装插件:
npm i webpack-merge@4.1.5 --save-dev
dev.config.js
漏写导入了!!!被自己气死!
prod.config.js
现在可以把原来的webpack.config.js删除掉.但是这个时候运行肯定会报错,因为找不到叫webpack.config.js的配置文件了
package.json
嗯但是这时又有问题了,就是我们打包出来的文件[跑到了build下面的dist文件夹里
这是因为我们在base文件里面写的路径的问题
我们要将后面改成:../dist
然后就OK了
