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

                }

使用render渲染组件:

    使用render渲染组件,会替换el中的#app,并且里面原来的内容也都消失,直接换成render渲染过来的组件

导入vue时,选择最全的那个vue包:

    两种方法:

安装vue的包:

    cnpm i vue -S

配置处理.vue文件的loader:

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

是用render函数结合vue渲染指定的组件到页面上:

简写:

webpack结合vue使用的总结:

export default 和export的使用:

    export default只能暴露一个,export可以多个

    export default可以用别名接受,export只能用{}接受,并且不能改别名,如果要改,需用 {oldName as newName}

    export default和export可以同时存在

安装vue-router路由:

    cnpm i vue-router -S

vue-router的使用:

注意:为什么render是直接替换app,路由对象不是替换app

结合webpack实现children子路由

style里的lang和scoped属性的使用:

    lang:设置css的语言:scss ,less

    scoped:加上这个属性,表示此style的生效范围是本组件内,不应用到全局样式里

    样式的scoped是通过css的属性选择器实现的

抽离出路由模块(router.js)