gulp+webpack+vue.js打造vue.js框架自動化

relsoul發表於2016-08-16
WebVue.js框架

安裝Babel,Vue,Gulp,WebPack

Babel

npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev

Vue

npm install vue-hot-reload-api vue-html-loader vue-loader vue-style-loader css-loader file-loader inject-loader template-html-loader url-loader --save-dev

Gulp

Gulp我用了sass 並不在vue中寫style..還是不太習慣 哈哈. 並且用gulp-livereload做服務端 而不用webpack自帶的 npm install gulp gulp-livereload gulp-sass gulp-webpack --save-dev

WebPack

npm install webpack

.babelrc

這個檔案很重要 如果不在專案根目錄新增這個資料夾會導致webpack loader的時候報錯 檔案內容為 { "presets": ["es2015"], "plugins": ["transform-runtime"] } 意思就是轉es2015並且載入外掛

專案地址

github 參考其他vue專案

專案目錄分佈

  • 根目錄 -index.html gulpfile.js webpack.config.js -- build -css(用來放生成的CSS) images(靜態images) js(生成的js) -- dev -output.js(webpack entry主檔案) output.scss(sass主檔案) sass(sass模組資料夾) js(*.Vue資料夾)

WebPack編寫

``` /** * Created by soul on 2016/3/22. */ const webpack=require("webpack");

module.exports={ entry:"./dev/output.js", //手動處理依賴載入 externals:{ "jquery" : "jQuery", "Vue":"Vue" }, //這裡不指定檔案路徑是因為gulp.dest輸出已經指定了 output:{ filename:"main.js" }, module:{ loaders:[ {test:/.vue$/,loader:"vue-loader"}, {test:/.js$/,loader:"babel-loader"}, ], }, vue:{ loaders:{ js:"babel" } } } ```

Gulp編寫

``` /** * Created by soul on 2016/3/14. */ const gulp=require("gulp"); const sass=require("gulp-sass"); const webpack=require("gulp-webpack"); const livereload=require("gulp-livereload")

gulp.task("default",["sass:watch","es6:watch"]);

gulp.task("sass:watch",function(){ livereload.listen(); gulp.watch("./dev/**/*.scss",["sass:compile"]) //這裡監聽index.html檔案變動 gulp.watch("index.html",function(){gulp.src("index.html").pipe(livereload())}) }); gulp.task("sass:compile",function(){ gulp.src("./dev/output.scss") .pipe(sass.sync().on('error', sass.logError)) .pipe(gulp.dest('./build/css')) .pipe(livereload()) });

gulp.task("es6:watch",function(){ //監聽vue和js gulp.watch("./dev//.vue",["es6:compile"]) gulp.watch("./dev//.js",["es6:compile"]) });

gulp.task("es6:compile",function(){ gulp.src("./dev/output.js") //這裡使用webpack處理依賴 .pipe(webpack(require("./webpack.config.js"))) .pipe(gulp.dest("./build/js/")) .pipe(livereload()) }); ```

index.html引入js與css

``` <!DOCTYPE html> Title

```

output.js 檔案載入管理

``` import HeaderNav from "./js/header.vue"

new Vue({ el:"body", components:{ HeaderNav } }); ```

./js/header.vue編寫

```

</header-nav-list>

export default{ data(){ return{ msg:'hello vue' } }, components:{ NavList } }

``` 只需要返回一個物件即可~剩下的vue-loader會幫你處理好

注意點

這裡遇到的坑就是.babelrc檔案沒有建立 導致loader的時候報錯..剩下的參考vue的API即可

相關文章