Vue开发实战

来源：互联网发布：京东精选知乎编辑：程序博客网时间：2024/05/22 03:50

关于vue的概念请移步官网：http://cn.vuejs.org/guide/ 。文章将要讲诉关于Vue的实战开发的一整套流程，其中涉及到的知识有ES2015、Vue，构建工具：webpack、gulp。

-------------------分割线----------如有不足之处，请指出互勉！----------------------------------------------

文章后面会给出github链接，直接安装即可

1.本地文件目录如下：

先配置webpack文件，用到了加载器有：

(i)：webpack用了babel来编译ES2015，

(ii)：ExtractTextPlugin插件来提取css成单独文件

(ii)：vue加载器来编译 *.vue文件

代码如下：

<span style="font-size:14px;">var webpack = require('webpack');var path = require("path");var ExtractTextPlugin = require("extract-text-webpack-plugin");module.exports = {entry:{main:'./src/js/main.js',},output:{path:'dist/js',filename:'[name].js'},module:{loaders:[{ test: /\.js$/, exclude: /node_modules/, loader: "babel?presets[]=es2015"},{test:/\.vue$/,loader:'vue'}]},vue:{loaders:{css: ExtractTextPlugin.extract("css"),sass: ExtractTextPlugin.extract("css!sass")}},plugins:[new ExtractTextPlugin("style.css")]};</span>

关于webpack详细知识请跳转

gulpfile.js用到如下几个task如下：

（1）：自动监听并编译webpack所要编译 *.js

（2）：自动监听并编译 *.scss

（3）：自动监听并编译 *.vue

代码如下：

var gulp = require("gulp");var webpack = require("webpack");var sass = require('gulp-sass');var webpackConfig = require("./webpack.config.js")gulp.task('webpack',function(callback){var myConfig = Object.create(webpackConfig);webpack(myConfig,function(err,stats){callback();});});gulp.task('sass',function(){gulp.src('src/scss/*.scss').pipe(sass().on('error',sass.logError)).pipe(gulp.dest('dist/css'));});gulp.task('auto',function(){gulp.watch('src/js/*.js',['webpack']);});gulp.task('vue-watch',function(){gulp.watch('src/js/*.vue',['webpack']);});gulp.task('scss-watch',function(){gulp.watch('src/scss/*.scss',['sass']);});gulp.task('default',['webpack','auto','scss-watch','sass','vue-watch']);

关于gulp的配置有一篇比较好的上手文章：github
需要安装相关依赖，文章后面会给出

下面介绍Vue的组件化开发的精髓了。

有一个这样的需求：

一个页面有两个或者多个组件构成，在主函数main.js 引入了child.vue组件；

main.js控制child.vue组件的显示状态

main.js的关键代码：

<div class="gu-content"><div :class="'show-big-img'" v-on:mouseenter="imgMoveEnter()" v-on:mouseleave="imgMoveOut()"><img class="img-title" src="./dist/images/big.jpg"><article-boxv-bind:class="{'msgmove-enter':moveChange}"></article-box></div></div>

当鼠标移入 class="show-big-img"区域时，执行imgMoveEnter函数；当鼠标移出时，执行imgMoveOut函数，此函数控制 moveChange的boolean值。当为true时，chilid组件显示；false时，child隐藏（这里通过add和remove类控制显示状态）。

main.js关键代码：

new Vue({el: 'body',components: {"construct":{template:'<p>construct出来的</p>'},articleBox},data:{moveChange: false},methods:{imgMoveEnter:function(){/*鼠标经过大图，详细信息显示隐藏*/this.moveChange = true;console.log(this.moveChange);},imgMoveOut:function(){this.moveChange = false;console.log(this.moveChange);}}})

el指vue的作用元素，compinents注册组件。articleBox是从child.vue引入

import articleBox from './child.vue'

子组件child.vue

因为代码过多，指贴出关键代码，详细可上文章后面给出的github地址观摩

<template>//html代码</template><script>export default{data(){return {//次组件的数据}}}</script><style lang="sass">//sass代码</style>

//因为感冒了，思绪比较混乱，有问题留言，博主定答而无尽！

奉上github地址 https://github.com/chenjianfang/vue-component

0 0