全栈开发一（webpack+gulp构建vue前端开发环境）
2017-09-25 本文已影响382人
itvwork
最近把学习了一把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 <pkg>` 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 webpack@2.6.0 -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路由的使用)
