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

    
    

    组件生命周期

    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'
            }
    
    1. margin、padding通常设置为8*n的像素8px、16px、24px等,如按钮左右间距为8px,表单上下间距为16px,模块间距24px。
    margin-left: 24px
    
    1. dialog组件弹窗宽度加宽时设置为800px或1000px,高度较高时top设置为20px。
    
    
    
    1. select组件设置宽度width:100%。
          
          
    
    1. 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

    你可能感兴趣的:(vue学习笔记)