全栈开发一（webpack+gulp构建vue前端开发环境）

最近把学习了一把vue这个前端框架，现在来写一关于开发vue项目的教程。我们会用mongdb+node作后台，vue作前端，构建一个简单企业型的一个网站。

构建vue前端开发环境

一、安装node.js;

进入http://nodejs.cn/选择自己系统所对应的node版本下载，个人推荐最新的8.4版本。

二、安装淘宝镜像

打开终端，window运行cmd 输入

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

为什么安装这个呢？很多人都说用npm就行了，其实主要是我们国家的网络问题，很多外国的网站都会被墙掉，不翻墙访问不到，所以我们安装这个镜像是方便我们下载依赖包;

三、建立项目

在你在系统中建立一个文件夹，用来存放你的源代码我的是window系统，我在 e盘中建立了一个vueteam下面是我的终端代码：

C:\Users\19955
λ e:

E:\
λ cd /node/vueteam

E:\node\vueteam
λ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vueteam) vueteam
version: (1.0.0) 1.0.1
description: 全栈开发项目
entry point: (index.js)
test command: 介绍信息
git repository:
keywords:
author: 蓝诀
license: (ISC)
About to write to E:\node\vueteam\package.json:

{
  "name": "vueteam",
  "version": "1.0.1",
  "description": "全栈开发项目",
  "main": "index.js",
  "scripts": {
    "test": "介绍信息"
  },
  "author": "蓝诀",
  "license": "ISC"
}


Is this ok? (yes)

上面代码主要是建立package.json，用来放置所有依赖

四、安装webpack（2.x） 与 gulp(4.0)

cnpm install [email protected] -g   //全局安装webpack
cnpm install gulpjs/gulp#4.0 -g   //全局安装gulp

在package.json

{
  "name": "vueteam",
  "version": "1.0.1",
  "description": "全栈开发项目",
  "main": "index.js",
  "scripts": {
    "test": "介绍信息"
  },
  "author": "蓝诀",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "connect-rest": "^1.9.5",
    "del": "^3.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "gulp": "gulpjs/gulp#4.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-cached": "^1.1.0",
    "gulp-cli": "^1.2.2",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^5.0.0",
    "gulp-less": "^3.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-plumber": "^1.1.0",
    "gulp-remember": "^0.3.1",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.7",
    "gulp-webpack": "^1.5.0",
    "highlight.js": "^9.11.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "less-plugin-clean-css": "^1.5.1",
    "vue": "^2.3.3",
    "vue-loader": "^12.1.1",
    "vue-router": "^2.5.3",
    "vue-style-loader": "^3.0.1",
    "vuex": "^2.3.1",
    "webpack": "^2.6.1",
    "vue-cli": "^2.8.2"
  }
}

然后在终端中输入

cnpm install

等安装完成

五、配置webpack

在根目录建立一个webpack.config.js的文件

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
module.exports = function () {
    return {
        "resolve": {
            "extensions": [ //省略的文件名后缀
                ".ts",
                ".js",
                ".vue"
            ],
            "modules": [
                "./node_modules"  //依赖模块目录

            ],
            "symlinks": true
        },
        entry: {
            index: './src/index.js', //入口

            //vendor: 'moment'  第三方js 也就是独立出来的包，比如jquery, echart
        },
        output: {
            filename: '[name].js', //编译的文件名
            publicPath: '/js/',//抽出的静态文件出来，可不用管，我打算用gulp处理静态文件
            path: path.resolve(__dirname, 'dist/js'),//编译代码后的路径
        },
        module: {
            //编译的规则
            rules: [{   //vue文件编译
                test: /\.vue$/,
                loader: 'vue-loader'

            }, {
                test: /\.css$/,  //css文件编译
                use: ExtractTextPlugin.extract({
                    use: 'css-loader'
                })
            }, {
                test: /\.js/,
                loader: 'babel-loader', //js文件编译
                exclude: /(node_modules)/,
                query: {
                    presets: ['es2015', 'stage-3']  //js文件编译使用的包，stage-3是一个es译版本，目前最新是stage-3
                }
            },
            {
                test: /\.less$/,    //编译vue里的less样式
                loader: 'less-loader'
            },
            {
                test: /\.(png|jpg|gif)$/,  //编译样式里的静态文件
            loader: 'url-loader',
                query: {
                // 把较小的图片转换成base64的字符串内嵌在生成的js文件里
                limit: 10000,
                // 路径要与当前配置文件下的publicPath相结合
                name: '../style/[name].[ext]?[hash:7]'
            }
                },
                {
        test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, //css文字
            loader: 'file-loader',
                query: {
            // 把较小的图标转换成base64的字符串内嵌在生成的js文件里
            limit: 10000,
                name:'../fonts/[name].[ext]?[hash:7]',
                    prefix:'font'
        }
    },

            ]
},
    plugins: [
        //new ExtractTextPlugin('../style/styles.css'), //抽出 css
        // new webpack.optimize.UglifyJsPlugin({  //压缩js
        //   compress: {
        //     warnings: false
        //   }
        // })

    ]
    }
}

六、配置gulp,在根目录建立gulpfile.js文件，代码如下

var gulp = require("gulp"); //本地安装gulp所用到的地方
var gutil = require("gulp-util");
var del = require("del"); //删除文件
var less = require('gulp-less'); //less语法
var concat = require("gulp-concat"); //合并
var minifycss = require('gulp-minify-css'); //压缩css
var autoprefixer = require('gulp-autoprefixer'); //自动补全浏览器兼容后缀
var cached = require('gulp-cached'); // 搭配 gulp-remember 可增量编译
var remember = require('gulp-remember'); //搭配 gulp-cached 可增量编译
var plumber = require('gulp-plumber'); //校正报错
var replace = require('gulp-replace'); //替换
var webpack = require('webpack');
var config = require('./webpack.config.js');
var connect = require('gulp-connect'); //本地服务
var rest = require('connect-rest');
var uglify = require('gulp-uglify');

//开发路径
var src = {
    html: './src/index.html',
    other: './src/vendor/*.js',
    less: './src/style/styles.less',
    file: './src/style/img/**/*',  //静态文件样式
    vendor: './src/vendor'
}

//编译的路径
var dist = {
    root: "./dist/",
    js: './dist/js',
    less: './dist/style',
    file: './dist/style/img',
    vendor: './dist/vendor'
};

//清除dist文件
function clean(done) {
    del.sync(['dist/**/*']);
    done();
}

//webpack编译
function devWebpack(done) {
    webpack(config(), function (err, stats) {
        //  compileLogger(err, stats);

        done();
    });
}



//编译html
function html(done) {
    return gulp.src(src.html)
        .pipe(plumber())
        .pipe(cached('html')) // 只传递更改过的文件
        .pipe(replace(/\~\/(\S.*.(js|css|png|jpg|gif))/g, function (match, p1) {
            return '192.168.26.144:9090/' + p1;
        }))
        .pipe(remember('html')) // 把所有的文件放回 stream
        .pipe(gulp.dest(dist.root));
    done();
}

//开启本地服务
function connectServer(done) {
    connect.server({
        root: dist.root,
        port: 9092,
        livereload: {
            port: 32140
        },
        middleware: function (connect, opt) {
            return [rest.rester({
                context: "/"
            })]
        }
    });
    done();
}

//监听变化
function watch() {
    gulp.watch(src.html, gulp.series(html, reload));
    gulp.watch([
        './src/commpents/**/*.vue',
        './src/view/**/*.vue',
        './src/**/*.js',
        './src/*html',
        './src/commpents/editor/**/*',
        './src/common/**/*',
        './src/validator/**/*'
    ],
    gulp.series(devWebpack, reload));
    gulp.watch(src.less, gulp.parallel(css));
    gulp.watch(src.file, gulp.parallel(file));
    gulp.watch(src.other, gulp.parallel(vendor));
  
}



 function css(done) {
    gulp.src(src.less) //该任务针对的文件
        .pipe(less())  //编less为css
        .pipe(autoprefixer())//补全浏览器前缀
        // .pipe(minify()) //该任务调用的模块压缩css  
        .pipe(gulp.dest(dist.less))
        .pipe(connect.reload());
    done();
};

function file(done) {
    gulp.src(src.file) //该任务针对的文件
        .pipe(gulp.dest(dist.file))
        .pipe(connect.reload());
    done();
};
function vendor(done) {
    gulp.src(src.other) //该任务针对的文件
        .pipe(uglify()) //压缩js
        .pipe(gulp.dest('./dist/js'))
        .pipe(connect.reload());
    done();
};

function reload() {
    return gulp.src('dist/')
        .pipe(connect.reload()); //自动刷新
        
}



gulp.task("default", gulp.series(clean, devWebpack, html, css, file,vendor, connectServer, watch));

六、建立开发目录

1、在项目根目录中新建src文件夹，并新建index.js文件作为入口文件

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './router';
import App from './app.vue';



Vue.use(VueRouter);
const router = new VueRouter({
    // mode: 'history',
    routes
})
  


new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
})

2、新建router.js路由文件

export default [
    {
        name: 'home',        
        path: '',
        component: function (resolve) {
            require(['./view/home/index.vue'], resolve)
        }

    },
    {
        name:'case',
        path: '/case',
        component: function (resolve) {
            require(['./view/case/index.vue'], resolve)
        }
    },
    {
        name:'news',
        path: '/news',
        component: function (resolve) {
            require(['./view/news/index.vue'], resolve)
        },
    }
   
];

后续的文件建我就不在这里再写了，源代码里写得还是很清楚的
源文件都在：https://pan.baidu.com/s/1miMJuYW
项目启动：

gulp

大家有什么建议可以发邮箱到我的E-mail,
我的QQ：1830305999
也可以加入我们的Q
我的主页：www.itvwork.com网站还没建好，正在建设中

下一篇：全栈开发二(vue路由的使用)