vue学习笔记

vue 开发环境介绍

npm(node包管理工具)

1. 安装node，自带npm
2. npm配置淘宝源镜像或者使用cnpm
   npm config set registry https://registry.npm.taobao.org
npm install -g cnpm
3. npm配置文件package.json
4. 执行脚本script：
   npm install ->安装依赖模块
   npm start ->本地启动一个webpack-dev-server服务器，运行项目
   npm run build ->打包前端项目，生成静态html、css、js
   npm run test ->运行测试代码
5. 依赖模块dependencies

// 一个常见的package.json文件
{
  "name": "vue-admin-template",
  "version": "3.6.0",
  "license": "MIT",
  "author": "Pan ",
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:report": "npm_config_report=true node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "test": "npm run lint"
  },
  "dependencies": {
    "axios": "0.17.1",
    "element-ui": "2.3.4",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "vue": "2.5.10",
    "vue-router": "3.0.1",
    "vuex": "3.0.1",
    "echarts": "3.8.5"
  },
  "devDependencies": {
    "autoprefixer": "7.2.3",
    "babel-core": "6.26.0",
    "babel-eslint": "8.0.3"
  }
}

webpack(前端项目构建打包工具)

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
核心概念：一切皆模块

1. entry 入口
   解析模块的入口，index.js
2. output 输出
   打包文件输出路径
3. loader 解析器
   使用指定loader处理对应资源模块，如图片，css，字体图标等，转化为js可读取的模块
4. plugin 插件
   全局处理模块，如压缩js、代码分、抽取公用模块等

// 一个常见的`webpack`配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
        entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle-[hash].js"
        },
        devtool: 'none',
        devServer: {
            contentBase: "./public", //本地服务器所加载的页面所在的目录
            historyApiFallback: true, //不跳转
            inline: true,
            hot: true
        },
        module: {
            rules: [{
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                }, {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [{
                            loader: "css-loader",
                            options: {
                                modules: true,
                                localIdentName: '[name]__[local]--[hash:base64:5]'
                            }
                        }, {
                            loader: "postcss-loader"
                        }],
                    })
                }
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
    ]
};

使用vue-cli脚手架快速搭建vue开发环境

1. npm install -g vue-cli ->全局安装vue-cli脚手架
2. vue init webpack vueTest->初始创建vue模板工程

vue 基础概念

指令

v-if->是否挂载元素，true时挂载并显示，false时不挂载到dom树中，类似display:node

启用

v-show->是否显示元素，元素始终存在于dom树中，类似visibility:hidden
v-for->循环渲染数组中的元素

 {{ item.name }} 

v-model->给表单双向绑定一个值

Message is: {{ message }}

v-on->元素设置监听响应事件，简写为@，如@click

Add 1

组件生命周期

1. created 初始化组件并创建完成
2. mounted 组件挂载到真实dom中，通常在这个方法中加载异步数据
3. beforeDestroy 组件卸载前触发，用于删除定时器或监听事件

vue组件生命周期

单文件组件(.vue)

1. template
   组件的html渲染模板，最后被解析为html标签挂载到dom中，只能存在一个子根节点，通常最外层使用一个空div包裹
2. script
   组件的js逻辑代码，默认导出一个对象，里面包括data，method，compted和生命周期等属性
3. style
   组件内部的样式代码，使用scoped属性表示该样式类只作用于组件内部

ElementUI 常用组件使用

栅格布局layout

容器tab、card、steps

表单form

表格table

弹窗dialog

组件常用样式规范

1. table组件剩余一列不设置宽度，使其灵活伸缩。

        {
          text: '权限类型',
          value: 'funcClass',
          width: 160
        },
        {
          text: '备注',
          value: 'memo'
        }

2. margin、padding通常设置为8*n的像素8px、16px、24px等，如按钮左右间距为8px，表单上下间距为16px，模块间距24px。

margin-left: 24px

3. dialog组件弹窗宽度加宽时设置为800px或1000px，高度较高时top设置为20px。

4. select组件设置宽度width:100%。

5. form 表单标签根据冒号对齐，label-position="right"。

vuex状态管理及异步交互

单向数据流

vuex状态管理

参考资料

1. es6语法
   es6基础语法
   https://www.jianshu.com/p/287e0bb867ae
   阮一峰es6教程
   http://es6.ruanyifeng.com
2. webpack概念
   webpack入门
   https://segmentfault.com/a/1190000006178770
   webpack中文网
   https://www.webpackjs.com/guides/production
3. npm中文文档
   npm中文网
   https://www.npmjs.com.cn/
4. vue中文文档
   vue中文网
   https://cn.vuejs.org/v2/guide/
5. vuex中文文档
   vuex中文网
   https://vuex.vuejs.org/zh/guide/
6. vue-router中文文档
   vue-router中文网
   https://router.vuejs.org/zh/
7. elementUI组件库
   elementUI官网
   http://element-cn.eleme.io/#/zh-CN/component/layout
8. vue-cli使用及环境搭建
   vue-cli使用文档
   https://cli.vuejs.org/zh/guide/installation.html
   vue-cli教程
   https://blog.csdn.net/wulala_hei/article/details/80488674
9. vue-admin模板项目文档
   vue-admin项目
   https://juejin.im/post/59097cd7a22b9d0065fb61d2