最近把學(xué)習(xí)了一把vue這個(gè)前端框架，現(xiàn)在來寫一關(guān)于開發(fā)vue項(xiàng)目的教程。我們會(huì)用mongdb+node作后臺(tái)鳍怨，vue作前端，構(gòu)建一個(gè)簡(jiǎn)單企業(yè)型的一個(gè)網(wǎng)站跪妥。
構(gòu)建vue前端開發(fā)環(huán)境
一鞋喇、安裝node.js;
進(jìn)入http://nodejs.cn/選擇自己系統(tǒng)所對(duì)應(yīng)的node版本下載，個(gè)人推薦最新的8.4版本眉撵。
二侦香、安裝淘寶鏡像
打開終端，window運(yùn)行cmd 輸入
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
為什么安裝這個(gè)呢纽疟？很多人都說用npm就行了罐韩，其實(shí)主要是我們國家的網(wǎng)絡(luò)問題，很多外國的網(wǎng)站都會(huì)被墻掉污朽，不翻墻訪問不到散吵，所以我們安裝這個(gè)鏡像是方便我們下載依賴包;
三、建立項(xiàng)目
在你在系統(tǒng)中建立一個(gè)文件夾蟆肆，用來存放你的源代碼我的是window系統(tǒng)矾睦，我在 e盤中建立了一個(gè)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: 全棧開發(fā)項(xiàng)目
entry point: (index.js)
test command: 介紹信息
git repository:
keywords:
author: 藍(lán)訣
license: (ISC)
About to write to E:\node\vueteam\package.json:
{
"name": "vueteam",
"version": "1.0.1",
"description": "全棧開發(fā)項(xiàng)目",
"main": "index.js",
"scripts": {
"test": "介紹信息"
},
"author": "藍(lán)訣",
"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": "全棧開發(fā)項(xiàng)目",
"main": "index.js",
"scripts": {
"test": "介紹信息"
},
"author": "藍(lán)訣",
"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
在根目錄建立一個(gè)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' 第三方j(luò)s 也就是獨(dú)立出來的包，比如jquery, echart
},
output: {
filename: '[name].js', //編譯的文件名
publicPath: '/js/',//抽出的靜態(tài)文件出來蛇损，可不用管官紫，我打算用gulp處理靜態(tài)文件
path: path.resolve(__dirname, 'dist/js'),//編譯代碼后的路徑
},
module: {
//編譯的規(guī)則
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是一個(gè)es譯版本，目前最新是stage-3
}
},
{
test: /\.less$/, //編譯vue里的less樣式
loader: 'less-loader'
},
{
test: /\.(png|jpg|gif)$/, //編譯樣式里的靜態(tài)文件
loader: 'url-loader',
query: {
// 把較小的圖片轉(zhuǎn)換成base64的字符串內(nèi)嵌在生成的js文件里
limit: 10000,
// 路徑要與當(dāng)前配置文件下的publicPath相結(jié)合
name: '../style/[name].[ext]?[hash:7]'
}
},
{
test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, //css文字
loader: 'file-loader',
query: {
// 把較小的圖標(biāo)轉(zhuǎn)換成base64的字符串內(nèi)嵌在生成的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'); //自動(dòng)補(bǔ)全瀏覽器兼容后綴
var cached = require('gulp-cached'); // 搭配 gulp-remember 可增量編譯
var remember = require('gulp-remember'); //搭配 gulp-cached 可增量編譯
var plumber = require('gulp-plumber'); //校正報(bào)錯(cuò)
var replace = require('gulp-replace'); //替換
var webpack = require('webpack');
var config = require('./webpack.config.js');
var connect = require('gulp-connect'); //本地服務(wù)
var rest = require('connect-rest');
var uglify = require('gulp-uglify');
//開發(fā)路徑
var src = {
html: './src/index.html',
other: './src/vendor/*.js',
less: './src/style/styles.less',
file: './src/style/img/**/*', //靜態(tài)文件樣式
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();
}
//開啟本地服務(wù)
function connectServer(done) {
connect.server({
root: dist.root,
port: 9092,
livereload: {
port: 32140
},
middleware: function (connect, opt) {
return [rest.rester({
context: "/"
})]
}
});
done();
}
//監(jiān)聽變化
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) //該任務(wù)針對(duì)的文件
.pipe(less()) //編less為css
.pipe(autoprefixer())//補(bǔ)全瀏覽器前綴
// .pipe(minify()) //該任務(wù)調(diào)用的模塊壓縮css
.pipe(gulp.dest(dist.less))
.pipe(connect.reload());
done();
};
function file(done) {
gulp.src(src.file) //該任務(wù)針對(duì)的文件
.pipe(gulp.dest(dist.file))
.pipe(connect.reload());
done();
};
function vendor(done) {
gulp.src(src.other) //該任務(wù)針對(duì)的文件
.pipe(uglify()) //壓縮js
.pipe(gulp.dest('./dist/js'))
.pipe(connect.reload());
done();
};
function reload() {
return gulp.src('dist/')
.pipe(connect.reload()); //自動(dòng)刷新
}
gulp.task("default", gulp.series(clean, devWebpack, html, css, file,vendor, connectServer, watch));
六、建立開發(fā)目錄
1毁涉、在項(xiàng)目根目錄中新建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)
},
}
];
后續(xù)的文件建我就不在這里再寫了贫堰，源代碼里寫得還是很清楚的
源文件都在：https://pan.baidu.com/s/1miMJuYW
項(xiàng)目啟動(dòng)：
gulp
大家有什么建議可以發(fā)郵箱到我的E-mail,
我的QQ：1830305999
也可以加入我們的Q
我的主頁：www.itvwork.com網(wǎng)站還沒建好穆壕，正在建設(shè)中
