Vue学习日记4

1.e2e
解析：模拟用户行为的测试。

2.vue关闭代码规范extra semicolon
解析：将config/index.js中的useEslint的值改成false。

3.Vue常用指令
解析：
[1]v-text：用于更新绑定元素中的内容
[2]v-html：用于更新绑定元素中的html内容
[3]v-if：用于根据表达式的值的真假条件渲染元素
[4]v-show：用于根据表达式的值的真假条件显示隐藏元素
[5]v-for：用于遍历数据渲染元素或模板
[6]v-on：用于在元素上绑定事件

4.Vue.js技术栈
解析：
[1]vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。
[2]vue-router：Vue提供的前端路由工具，利用其实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。
[3]vuex：Vue提供的状态管理工具，用于同一管理项目中各种数据的交互和重用，存储需要用到数据对象。
[4]ES6：Javascript的新版本，ECMAScript6的简称。利用ES6可以简化JS代码，同时利用其提供的强大功能来快速实现JS逻辑。
[5]NPM：node.js的包管理工具，用于同一管理前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。
[6]webpack：一款强大的文件打包工具，可以将前端项目文件同一打包压缩至js中，并且可以通过vue-loader等加载器实现语法转化与加载。
[7]Babel：一款将ES6代码转化为浏览器兼容的ES5代码的插件。

5.构建大型应用
解析：
[1]项目前端目录及文件构建[vue-cli]

• npm install -g vue-cli：全局安装vue-cli
• vue init webpack my-project：利用vue-cli在目录地址生成一个基于webpack的名为my-project的Vue项目文件及目录
• cd my-project：打开刚刚创建的文件夹
• npm intall：安装项目所依赖的包文件
• npm run dev：利用本地node服务器在浏览器中打开并浏览项目页面

[2]组件编写及通信[组件]
以.vue后缀结尾的文件便是Vue项目中常见的单文件组件。在Vue2.0中提供了props来实现父组件向子组件传递数据，通过$emit来实现子组件向父组件传递数据。当然如果是较为复杂和普遍的数据交互，建议使用vuex来同一管理数据。
[3]插件使用
全局使用，如下所示：

• 在index.html引入：这样的方式不推荐使用，因为存在先后加载顺序的问题，有些插件不支持这一方式。
• 通过webpack配置文件引入：主要通过plugin配置项的webpack.ProvidePlugin()方法实现，不过只适合支持CommonJs规范并提供一个全局变量的插件，比如jQuery中的$。
• 通过import+Vue.use()引入：这种方式需要在全局.vue文件中import需要加载的插件，然后通过Vue.use(‘插件变量名’)来实现，不过此方法只支持遵循Vue.js插件编写规范的插件使用，如vue-resourece。

单文件使用，如下所示：

• 通过import直接引入：这种方式可以在需要调用插件的.vue文件中使用，不过需要注意和实例的创建顺序问题，或者也可以通过require引入。
• import+components注册：此方式为Vue组件的使用方式，可以在一个组件中注册并使用一个子组件。

[4]文件打包[webpack]

• 使用webpack的DefinePlugin指定生产环境：通过plugin中的DefinePlugin配置，可以声明’process.env’属性为’development’(开发环境)或者’production’(生产环境)，结合npm配置文件package.json中scripts的命令来切换环境模式十分方便。
• 使用UglifyJs自动删除代码块内的警告语句：一般在生产环境的webpack配置文件中使用，通过new webpack.optimize.UglifyJsPlugin()来进行配置，删除警告语句可以缩减文件的体积。
• 使用Webpack hash处理缓存：当需要对发布到线上的文件进行修改时，重新编译的文件名如果和之前版本的相同会引起浏览器无法识别而加载缓存文件的问题。这样需要自动的生成带hash值的文件名来阻止缓存。
• 使用v-if减少不必要的组件加载：v-if指令其实很有用处，它可以让项目中暂时不需要的组件不进行渲染，等需要用到的时候在渲染，比如某个弹窗组件等。这样可以减少页面首次加载的时间和文件量。

6.vue.config.productiontip = false
解析：设置为false以阻止vue在启动时生成生产提示。

7.export default输出
解析：export default在一个模块中只能使用一次。
说明：export与export default均可用于导出常量、函数、文件、模块等。

8.
解析：监听键盘回车事件。

9.v-model
解析：v-model通常用于input的双向数据绑定，也可以实现子组件到父组件数据的双向数据绑定。

10.watch
解析：Vue.js有一个方法watch，它可以用来监测Vue实例上的数据变动。

11.window.localStorage.getItem
解析：
[1]localStorage.getItem(key)：获取指定key本地存储的值
[2]localStorage.setItem(key,value：将value存储到key字段
[3]localStorage.removeItem(key)：删除指定key本地存储的值

12.v-bind:class
解析：可以传给v-bind:class一个对象，以动态地切换class：

13.watch
解析：添加数组更改的监听事件，存入LocalStorage，如下所示：

watch: {
  items: {
    handler: function (items) {
      Store.save(items)
    },
    deep: true
  }
}

14.Element框架
解析：基于Vue.js 2.0的UI组件库。

15.vue-element-admin
解析：基于Vue和Element的框架。

16.Vuex
解析：Vuex是一个专为Vue.js应用程序开发的状态管理模式。

17.vuejs和element搭建的一个后台管理界面
解析：
[1]演示地址：https://taylorchen709.github.io/vue-admin/
[2]源码地址：https://github.com/taylorchen709/vue-admin

18.vue2.0+element-ui权限管理系统的后台模板
解析：
[1]github：https://github.com/Nirongxu/vue-xuAdmin
[2]码云：https://gitee.com/nirongxu/xu-webplatform
[3]预览地址：https://nirongxu.github.io/vue-xuAdmin/dist/

19.D2Admin
解析：

https://fairyever.gitee.io/d2-admin-preview/

20.axios
解析：网络请求。

21.安装cnpm
解析：

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

22.Vue+Django+MySQL搭建指南
解析：
[1]django-admin startproject appName
[2]python manage.py startapp childName
[3]vue-init webpack vueName

23.vue-element-admin项目目录
解析：

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

24.vue-element-admin安装
解析：

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install
# 建议不要用cnpm安装，会有各种诡异的bug，可以通过如下操作解决npm下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 本地开发，启动项目
npm run dev

说明：可以把vue-element-admin当做工具箱或者集成方案仓库，在vue-admin-template的基础上进行二次开发，想要什么功能或者组件就去vue-element-admin那里复制过来。

25.下载国际化版本
解析：

git clone -b i18n https://github.com/PanJiaChen/vue-element-admin.git

参考文献：
[1]渐进式JavaScript框架：https://vue.docschina.org/#指令
[2]Vue.js2.0：https://cn.vuejs.org/v2/api/
[3]Vue+Django+MySQL搭建指南：https://www.jianshu.com/p/9093894d2614
[4]vue-element-admin和Django简单整合：https://www.sohu.com/a/244645479_727010