太久没更新了,准备好久测试大赛,去了南京4天
回来恶补~
路途中遇到一个也是想做前端的师弟,探讨了一下
他表示js基础还是要打牢固
对此我甚是震撼
好像为了学框架,忘了最初的东西
接下来把vue结束后,应该攻克一下基础,还有性能
-----------------------------------------------------------------
一,图片url
sudo cnpm i url-loader file-loader -D
图片自动变成base64存储,减少二次请求
(1)我们想实现的是小图书片可以变base64,大图片不要编码。
直接在module>rules里面传参limit=xxx,当大于limit值会不再进行base64编码,小于等于的时候会编码
module: { // 这个节点,用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的第三方loader 规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7630' }// 处理 图片路径的 loader
]
}
但是图片显示的名称也变成一串字符串,是因为防止图片重名。
(2)不让改名传参:name=[name].[ext]
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7630&name=[name].[ext]’ }
但是重名的话,会只出现同一张图片。
解决办法:在名字前面加8位hash值
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7630&name=[hash:8]-[name].[ext]’ }
二,bootstrap字体图标
cnpm i bootstrap -S
(没有完成)
三,babel,将 高级的语法转换为 低级的语法
1.
1.1 第一套包: cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
1.2 第二套包: cnpm i babel-preset-env babel-preset-stage-0 -D
安装后使用报错,必须用第7版babel-loader@7
2. 打开 webpack 的配置文件,在 module 节点下的 rules 数组中,添加一个 新的 匹配规则:
2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
3.根目录中,新建一个 叫做 .babelrc 的Babel 配置文件
在 .babelrc 写如下的配置
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
四,render函数
Component是在特定位置放置,render整个替换页面中 el 指定的那个 容器
<body>
<div id="app">
<p>444444</p>
</div>
<script>
var login = {
template: '<h1>这是登录组件</h1>'
}
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
render: function (createElements) { // createElements 是一个 方法,调用它,能够把 指定的 组件模板,渲染为 html 结构
return createElements(login)
// 注意:这里 return 的结果,会 替换页面中 el 指定的那个 容器
}
});
</script>
</body>
五,webpack+vue开发
sudo npm i vue -S
在main.js里面import vue的包,跟普通网页不同,在 webpack 中,使用 import Vue from 'vue' 导入的 Vue 构造函数,功能不完整,只提供了 runtime-only 的方式。
有两种更改方法:
(1)去掉import Vue from 'vue'
改为:import Vue from '../node_modules/vue/dist/vue.js’
(2)保留import Vue from ‘vue'
修改webpack.config.js,在module.exports里面加上:
resolve: {
alias: { // 修改 Vue 被导入时候的包的路径
"vue$": "vue/dist/vue.js"
}
}
六,渲染组件到容器,用render函数
总结梳理: webpack 中如何使用 vue :
1. 安装vue的包: cnpm i vue -S
2. 由于 在 webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以,需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
3. 在 main.js 中,导入 vue 模块 import Vue from 'vue'
4. 定义一个 .vue 结尾的组件,其中,组件有三部分组成: template script style
5. 使用 import login from './login.vue' 导入这个组件
6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })
7. 在页面中创建一个 id 为 app 的 div 元素,作为我们 vm 实例要控制的区域;
七,export default 和export
暴露成员的形式
Export default向外暴露的成员可以使用任意自定义名称接收
export default只允许向外暴露1次
//test.js
var info = {
name: 'zs',
age: 20
}
export default info
/* export default {
address: '北京'
} */
//main.js:
import m222 from './test.js'
console.log(m222)
使用 export 向外暴露的成员,只能使用 { } 的形式来接收,这种形式,叫做 【按需导出】
// 注意: export 可以向外暴露多个成员, 同时,如果某些成员,我们在 import 的时候,不需要,则可以 不在 {} 中定义
// 注意: 使用 export 导出的成员,必须严格按照 导出时候的名称,来使用 {} 按需接收;
// 注意: 使用 export 导出的成员,如果 就想 换个 名称来接收,可以使用 as 来起别名;
//test.js
var info = {
name: 'zs',
age: 20
}
export default info
/* export default {
address: '北京'
} */
export var title = '小星星'
export var content = '哈哈哈'
//Main.js:
import m222, { title as title123, content } from './test.js'
console.log(m222)
console.log(title123 + ' --- ' + content)