太久没更新了，准备好久测试大赛，去了南京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)
814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
