想利用暑假时间好好学习一下vue,会记录每一天的学习内容。
今天是学习vue的第8
天!
起起伏伏乃人生常态,继续加油~
学习内容
1. el和template的区别
可以正常打包并运行后,我们来考虑另一个问题:
- 如果希望将
vue
实例中data
的数据显示在页面中,就必须要修改index.html
- 如果我们后面自定义了组件,也必须修改
index.html
来使用组件 - 但是
HTML模板
在之后的开发中,并不希望手动的来频繁修改,该怎么做?
定义template
属性:
- 我们可以将
HTML模板
中div
元素中的内容删掉,只保留一个基本的id
为app
的元素
那么el
和template
模板的关系是什么呢?
- 在我们之前的学习中,我们知道
el
用于指定Vue
要管理的DOM
,可以帮助解析其中的指令、事件监听等 - 而如果
Vue
实例中同时指定了template
,那么template
模板中的内容会替换掉挂载的对应el
的模板
这样做的好处?
- 以后的开发中不需要再次操作
index.html
了,只需要在template
中写入对应的标签即可
但是template
模板放在vue
实例中看起来会很冗杂
我们要将template
模板中的内容进行抽离
2. vue组件化开发引入
但是写在这些写在main.js
中还是有些繁琐,App
实际是个对象,可以进一步抽离,src
文件夹下新建一个vue
文件夹
在app.js
中导入
3. .vue文件封装处理
但是像上面这样写,一个组件以一个js对象的形式进行组织和使用是非常不方便的,在app.js
中我们的模板和js代码没有进行分离
而且如果有样式的话,我们写在哪里呢?
现在我们以一种全新的方式来组织一个vue
的组件
在vue
文件夹下新建一个App.vue
文件
App.vue
中的内容:
现在尝试用webpack
打包,npm run build
,会报错
因为App.vue
加载不出来,要配置对应的loader
4. 安装vue-loader、vue-template-compiler
我这里指定了vue-loader
版本15.4.2
,vue-template-compiler
版本2.5.21
,(不加版本号应该会自动下载最新版
npm install --save-dev vue-loader@15.4.2 vue-template-compiler@2.5.21
修改webpack.config.js
的配置文件:
但当我们npm run build
会发现,并不能成功
原因是vue-loader
在15.x.x
版本之后,如果要使用,需要配置相应的插件vue-loader-plugin
这里就直接在package.json
中改了vue-loader
的版本号,再重新终端安装一下,npm install
就好
5. vue的使用方案
新建一个cpn.vue
文件
结构和App.vue
中一样
在App.vue
中导入、注册并使用cpn组件
之后我们的应用程序就是一颗组件树,App.vue
就作为我们的根组件,会在根组件中引用其他组件,每个组件都会是一个独立的文件
6. plugin
plugin
是什么?
plugin
是插件,通常是用于对某个现有的架构进行扩展webpack
中的插件,是对webpack
现有功能的各种扩展,比如打包优化、文件压缩等
loader
和plugin
的区别:
loader
主要用于转换某些类型的模块,它是一个转换器plugin
是插件,它是对webpack
本身的扩展,是一个扩展器
plugin
的使用过程:
- 第一步:通过npm安装需要使用的
plugins
(某些webpack已内置的插件不需安装) - 第二步:在
webpack.config.js
中的plugins
中配置插件
添加版权的plugin
我们先来使用一个最简单的插件,为打包的文件添加版权声明
- 该插件名字叫
BannerPlugin
,属于webpack
自带的插件
修改webpack.config.js
的文件:
重新打包程序,查看bundle.js
文件的头部,看到如下信息:
打包html的plugin
目前我们的index.html
文件是存放在项目的根目录下:
- 但是,在真实发布项目时,发布的是
dist
文件夹下的内容 - 我们需要将
index.html
文件打包到dist
文件夹中 - 这时候可以使用
HtmlWebpackPlugin
插件
HtmlWebpackPlugin
插件可以做的事情:
- 自动生成一个
index.html
文件(可以指定模板来生成) - 将打包的js文件,自动通过
script
标签插入到body
中
安装HtmlWebpackPlugin
插件:
(我这里指定了安装版本3.2.0
)
npm install html-webpack-plugin@3.2.0 --save-dev
修改webpack.config.js
的文件:
- 这里的
template
表示根据什么模板来生成index.html
- 我们需要删除之前在
output
中添加的publicPath
属性 - 否则插入的
script
标签中的src
可能会有问题
⚠️:选为模板的index.html
中可以不用引入bundle.js
了,一起打包后会自动生成的
并且要注意选为模板的index.html
的路径(我的index.html
在src
文件夹下)
npm run build
后,会发现成功打包到了dist
文件夹下
(各个文件之间的依赖webpack
会帮我们处理好的)
压缩js的plugin
项目发布之前,我们必然需要对js
文件进行压缩处理
- 使用一个插件
uglifyjs-webpack-plugin
安装uglifyjs-webpack-plugin
:
(我这里指定了安装版本1.1.1
)
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
修改webpack.config.js
文件:
查看bundle.js
,成功压缩
(但是会删除掉我们的注释,所以这个plugin和生成版权声明的那个plugin应该只能同时用一个)
7. 搭建本地服务器
webpack
提供了一个可选的本地开发服务器,这个服务器基于node.js
搭建,内部使用express
框架,可以实现:让浏览器自动刷新显示我们修改后的结果
- 不过它是个单独的模块,在
webpack
使用之前需要先安装它
npm install webpack-dev-server@2.9.1 --save-dev
devserver
是作为webpack
中的一个选项,选项本身可以设置如下属性:
contentBase
:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里填'./dist'
port
:端口号inline
:页面实时刷新historyApiFallback
:在SPA
页面中,依赖HTML5
的history
模式
修改webpack.config.js
文件:
尝试运行时,如果输入webpack-dev-server
它会在全局查找,但是找不到,就会报错,其实应该输入:
node_modules/.bin/webpack-dev-server
但是每次都输入这一长串命令很麻烦,所以最好先在package.json
中配置一下
配置完之后,在终端输入npm run dev
,它会默认先在本地找
点击http://localhost:8080/
就可以启动本地服务了,默认端口8080
之后再修改代码,不用刷新,它会自动更新(虽然有点慢)
配置改成,可以不用手动点链接,直接跳转
"dev": "webpack-dev-server --open"