每天学点Vue,学习笔记---DAY5
组件复习:
全局组件:
私有组件:
路由复习:
键盘的keyup事件使用:
使用watch监听:
使用watch监听路由的改变,keyup等无法做到
'$route.path' 一改变,即触发function函数
computed:{
'name':function(){
xxxx
}
}
1.计算结果会被缓存,每次function里的变量发生改变后,都会重新计算结果.提高效率(存在多个引用的话)
2.直接用{{xx}}去使用这个属性
3.一定要return一个东西给name这个计算属性(watch不用)
对比
nrm的安装:
webpack的使用:
安装 webpack
-g全局
-d本地当前项目
初始化package.json: npm init -y
安装jquery
打包mainjs:
目前为止,webpack可以做什么事情?
通过配置文件打包,简化操作,通用
webpack-dev-server基本使用
注:依赖webpack,需安装webpack
<script src="/bundle.js"></script>:引入内存中放的bundle.js
注:
第一种:
scripts可以配置我们要运行的一些命令""dev"
--open 项目运行后,自动在浏览器打开页面
--port 3000 :在3000端口运行
--contentBase src :以src作为内容根路径(打开时直接到src根路径里)
--hot:不重复生成bondle.js(打补丁),css样式修改时,不用刷新,即可改变浏览器样式
写法2:不推荐,把上面的配置内容移到webpack.config.js文件里
devServer:{
...
}
热更新启动第二第三步(麻烦,所以推荐用第一种方法)
使用html-webpack-plugin:
1 
2 
3
作用:
css样式表的第三方loader的使用:
从右到左处理:
webpack处理第三方文件类型的过程:
配置处理.less文件的loader:
1:cnpm i less-loader - D
2.cnpm i less -D
3.在webpack.config.js里配置规则
{test: /\.less$/,use:['style-loader','css-loader','less-loader']}
配置处理.scss文件的loader:
1:cnpm i sass-loader - D
2.cnpm i node-sass -D
3.在webpack.config.js里配置规则
{test: /\.scss$/,use:['style-loader','css-loader','sass-loader']}
配置url-loader:
cnpm i url-loader file-loader -D
使用babel将es6高级语法转成低级语法:
安装babel:
1.cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
2.cnpm i babel-preset-env babel-preset-stage-0 -D
3.在webpack的配置文件(webpack.config.js)的module节点下的rules数组中,添加新的匹配规则:
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
4.在项目根目录 新建一个.babelrc文件(json格式),不能写注释,字符串要用双引号
配置:{
"presets":["env","stage_0"],
"pligins":["transform_runtime"]
}