搭建Vue2+Vuex+Webpack+Pug(jade)+Stylus環境

 

 

 1、開發環境配置

開始以前，假設你已經安裝了最新版本的 node 和 npm。

全局安裝 vue-cli 和 webpack :

npm install vue-cli webpack -g

建立工程；工程名字不能用中文，英文也建議小寫。

vue init webpack 項目名

按照步驟一步一步執行，須要你添加 Project name，Project description，Author.

而後使用 npm install 安裝官方庫。

而後使用npm run dev運行咱們的項目後瀏覽器會自動彈出，並展現如下頁面。

能夠根據頁面給咱們的這八個連接得到咱們想要的學習資源。

接下來安裝Vue全家桶。

npm install vue-router vue-resource vuex --save

以下修改src/main.js ：

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Vuex from 'vuex'

import App from './App.vue'

Vue.use(VueResource)
Vue.use(VueRouter)
Vue.use(Vuex)

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

安裝html模板語言pug(jade)

npm install pug pug-loader pug-filters --save

安裝css 預編譯語言stylus

npm install style-loader stylus stylus-loader --save
# 或者你習慣用sass或less 
# npm install style-loader node-sass sass-loader --save 
# npm install style-loader less less-loader --save

打開webpack.config.js，配置loader：

 

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.pug$/,
        loader: 'vue-html!pug-html'
      },
      {
        test: /\.styl/,
        loader: "style-loader!css-loader!stylus-loader"
      },
...

生成html文件,安裝插件` html-webpack-plugin  `。

npm install html-webpack-plugin --save

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/build.js',
  },

...

  plugins: [
    new HtmlWebpackPlugin({
      title: 'Charles 的我的主頁',
      filename: 'index.html', //生成後的文件名，默認爲 index.html.
      template: 'index.html',  //自定義的模板文件
      inject：'body' //script標籤位於html文件的 body 底部
    }),
  ]
}

提取CSS，提取CSS的插件叫`extract-text-webpack-plugin`，這個不是webpack自帶的，須要本身安裝。

npm install extract-text-webpack-plugin --save

原來的`style-loader`就要修改了，畢竟咱們的目標是將CSS提取出來而不是放在head中, 而且vue文件中<style>裏的樣式也要提取出來。

var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
...

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            stylus: ExtractTextPlugin.extract("css-loader!stylus-loader")
          }
        }
      },
      {
        test: /\.pug$/,
        loader: 'vue-html!pug-html'
      },
      {
        test: /\.styl/,
        loader: ExtractTextPlugin.extract("css-loader!stylus-loader")
      },
...

  plugins: [
    new HtmlWebpackPlugin(),
    new ExtractTextPlugin("css/style.css")
  ]