黑马vue学习的总结,vue笔记

cls:清除终端输出

$refs

$http

$route

使用this.$emit('show')来调用父方法

webpack教程版本安装命令: 

(-D:

 

开发依赖,-g:全局依赖,-S项目依赖)

安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm i -y

全局安装webpack:

    npm install webpack@3.6.0 -g

安装webpack-dev-server:自动打包,自动刷新浏览器

    npm i webpack-dev-server@2.9.3 -D

安装html-webpack-plugin:在内存生成index.html页面,同时把bundle.js注入进去

    cnpm i html-webpack-plugin -D

安装.css文件加载器:

    cnpm i style-loader css-loader -D

安装.less文件加载器:

    cnpm i less-loader less -D

安装.scss文件加载器:

    cnpm i sass-loader node-sass -D 

安装处理css文件中图片路径的loader:

    cnpm i url-loader file-loader -D

安装bootstrap:

    cnpm i bootstrap -S

安装vue的包:

    cnpm i vue -S

安装处理.vue文件的loader:

    cnpm i vue-loader vue-template-compiler -D

安装vue-router路由:

    cnpm i vue-router -S

安装Mint-UI

    npm i mint-ui -S

安装vue-resource(用this.$http.get('...').then(...))

    npm i vue-resource -S

安装vuex: npm i vuex --save

初始化package.json: npm init -y

安装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"]

                }

vue-preview:vue集成的缩略图插件

    注:1.vue2.0以上版本

        2.img上的class不能去掉

        3.每个图片对象里有w和h属性

 

去除严格模式:mui.js有用到callee等,

 

 

mint ui 完整引入

webpack-dev-server配置:

html-webpack-plugin配置:

css,less.scss:配置

 

图片路径的loader配置:

图片路径的loader配置带参数使用:

    和url地址一样,用?key1=val1&key2=val2

    limit=xx:如果图片大小小于xx就编码成base64,如果图片大于等于xx,就不转成base64

    name=[hash:8]-[name].[ext]

    图片名字,拼上8位hash,图片原名,图片后缀

配置url-loader处理字体文件:

 

组件:

全局组件:

私有组件:

父子组件传值:

父子组件传方法&子组件给父组件传值

 

路由:

取url的id

npm install -S -D -g 有什么区别

---

npm install module_name -S    即    npm install module_name --save    写入dependencies

npm install module_name -D    即    npm install module_name --save-dev 写入devDependencies

npm install module_name -g 全局安装(命令行使用)

npm install module_name 本地安装(将安装包放在 ./node_modules 下)

 

dependencies与devDependencies有什么区别呢？

devDependencies 里面的插件只用于开发环境，不用于生产环境

dependencies 是需要发布到生产环境的

有点儿不好理解，别怕，举个例子就好：

你开发一个前端项目，在项目中你需要使用gulp构建你的开发和本地运行环境,这时你就要放到dependencies里。gulp是你用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，所以放到dev里就ok了。

你写程序要用element-ui,生产环境运行项目时肯定要用到element-ui,这时element-ui就应该安装到dependencies中去。

 

ctrl+d,快速选中  vscode

 

处理组件下的dom元素:

 

再用this.$refs.ball

 

watch 属性监听

git提交代码:

 

    操作dom元素