Vue2.2版本学习小结

一、项目初始化继续参考这里

https://github.com/vuejs-templates/webpack-simple

或者

https://github.com/vuejs-templates/webpack

初始化的时候一路按回车,如果初始化失败,请翻墙或者更换npm源。

初始化之后npm install安装

安装好了之后运行项目

npm run dev

二、如何使用css预处理语言

1.使用stylus

安装stylus与stylus-loader

npm install stylus

npm install stylus-loader

<style lang="stylus">

clip_image002

2.使用sass

安装sass-node sass与sass-loader

npm install sass-node npm install sass npm sass-loader

(如果安装不成功,可以尝试更换镜像)

clip_image004

注意 lang="scss" 而不是sass    <style lang="scss">

新版模块路径简写配置有变化了

clip_image006

——————>

clip_image008

@符代替src

三、Vue2.2版本相对于Vue2.1版本对路由使用写法这块发生了一点点变法

路由由main.js独立出来router文件里

vue2.1使用路由的方式

clip_image010

——————》

vue2.2使用方式

clip_image012

原来的1/2/3/4 步不需要了,现在只需配置第三部就行了。。配置路由

clip_image014

让页面能够访问到,先不管跳转正取与否

路由配置

clip_image044

配置路由当前导航高亮

clip_image046

目前现版本写法:不要4步走了 直接new Router 里面以对象的形式去配置

四、Eslint规则配置一下

clip_image016

五、import的使用

预处理语言导入引用的时候用 @import

clip_image018

包括.vue文件中style部分引入

clip_image020

Script标签部分引入模块的时候直接 import导入----肯能原因是es6的导入方法

clip_image022

@import导入的是预处理语言的引入模块

同一个组件下的css引入图片的路径

clip_image024

clip_image026

clip_image028

./ 当前目录 ../往上找一级 ../../往上找2级

注意这里的短路径只是给es6使用的

clip_image030

这样导入commin.scss模块是可以的

clip_image032

·如果在style部分导入样式模块不能使用短路径

为了防止我们定义的mixin 函数不出错,还是尽量style部分导入样式模块

Html部分引入图片也是一样 ./

clip_image034

六、其他

通过父组件传递过来的值判断子组件是否某个元素

Index.vue

clip_image036

Nav.vue

clip_image038

v-if 也可以换成v-show

props熟悉设置

https://cn.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

clip_image040

clip_image042

。。。。

继续学习中,待补充。。。

原文地址:https://www.cnblogs.com/ruoqiang/p/6616859.html