vue 开发环境介绍
npm(node包管理工具)
- 安装node，自带npm
- npm配置淘宝源镜像或者使用cnpm
npm config set registry https://registry.npm.taobao.org
npm install -g cnpm - npm配置文件package.json
- 执行脚本script：
npm install->安装依赖模块
npm start->本地启动一个webpack-dev-server服务器，运行项目
npm run build->打包前端项目，生成静态html、css、js
npm run test->运行测试代码 - 依赖模块dependencies
// 一个常见的package.json文件
{
"name": "vue-admin-template",
"version": "3.6.0",
"license": "MIT",
"author": "Pan <panfree23@gmail.com>",
"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。
核心概念：一切皆模块
- entry 入口
解析模块的入口，index.js - output 输出
打包文件输出路径 - loader 解析器
使用指定loader处理对应资源模块，如图片，css，字体图标等，转化为js可读取的模块 - 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开发环境
-
npm install -g vue-cli->全局安装vue-cli脚手架 -
vue init webpack vueTest->初始创建vue模板工程
vue 基础概念
指令
v-if->是否挂载元素，true时挂载并显示，false时不挂载到dom树中，类似display:node
<el-button v-if="status===true">启用</el-button>
v-show->是否显示元素，元素始终存在于dom树中，类似visibility:hidden
v-for->循环渲染数组中的元素
<li v-for="item in list"> {{ item.name }} </li>
v-model->给表单双向绑定一个值
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
v-on->元素设置监听响应事件，简写为@，如@click
<button v-on:click="counter += 1">Add 1</button>
组件生命周期
-
created初始化组件并创建完成 -
mounted组件挂载到真实dom中，通常在这个方法中加载异步数据 -
beforeDestroy组件卸载前触发，用于删除定时器或监听事件
vue组件生命周期
单文件组件(.vue)
- template
组件的html渲染模板，最后被解析为html标签挂载到dom中，只能存在一个子根节点，通常最外层使用一个空div包裹 - script
组件的js逻辑代码，默认导出一个对象，里面包括data，method，compted和生命周期等属性 - style
组件内部的样式代码，使用scoped属性表示该样式类只作用于组件内部
<template>
<div class="testStyle">
<span>{{name}}</span>
<button @click="handleClick">修改</button>
</div>
</template>
<script>
export default {
data() {
return {
name: 'zhangsan'
}
},
methods: {
handleClick() {
console.log('onButtonClick')
}
}
}
</script>
<style scoped>
.testStyle {
background-color: #fff;
}
</style>
ElementUI 常用组件使用
栅格布局layout
容器tab、card、steps
表单form
表格table
弹窗dialog
组件常用样式规范
- table组件剩余一列不设置宽度，使其灵活伸缩。
{
text: '权限类型',
value: 'funcClass',
width: 160
},
{
text: '备注',
value: 'memo'
}
- margin、padding通常设置为8*n的像素8px、16px、24px等，如按钮左右间距为8px，表单上下间距为16px，模块间距24px。
margin-left: 24px
- dialog组件弹窗宽度加宽时设置为800px或1000px，高度较高时top设置为20px。
<el-dialog :title="textMap[dialogStatus]" width="720px" top="20px">
</el-dialog>
- select组件设置宽度width:100%。
<el-select size="medium" style="width:100%">
</el-select>
- form 表单标签根据冒号对齐，label-position="right"。
<el-form label-position="right">
</el-form>
vuex状态管理及异步交互
单向数据流
vuex状态管理
参考资料
- es6语法
es6基础语法
https://www.jianshu.com/p/287e0bb867ae
阮一峰es6教程
http://es6.ruanyifeng.com - webpack概念
webpack入门
https://segmentfault.com/a/1190000006178770
webpack中文网
https://www.webpackjs.com/guides/production - npm中文文档
npm中文网
https://www.npmjs.com.cn/ - vue中文文档
vue中文网
https://cn.vuejs.org/v2/guide/ - vuex中文文档
vuex中文网
https://vuex.vuejs.org/zh/guide/ - vue-router中文文档
vue-router中文网
https://router.vuejs.org/zh/ - elementUI组件库
elementUI官网
http://element-cn.eleme.io/#/zh-CN/component/layout - vue-cli使用及环境搭建
vue-cli使用文档
https://cli.vuejs.org/zh/guide/installation.html
vue-cli教程
https://blog.csdn.net/wulala_hei/article/details/80488674 - vue-admin模板项目文档
vue-admin项目
https://juejin.im/post/59097cd7a22b9d0065fb61d2
网友评论