【vue】vue組件化開發初體驗-示例vue-loader-example學習記錄

時間 2019-11-12

標籤 vue 組件開發體驗示例 loader example 學習記錄简体版

原文原文鏈接

來自vue官方示例：https://github.com/vuejs/vue-loader-example

使用了vuejs和webpack，以及一系列webpack加載器，如vue-loader

依葫蘆畫瓢，試了試，有些具體分析還須要再學習學習，先簡單記錄下具體的作法，屢屢思緒。

添加github練習源碼：https://github.com/dingyiming/learn-Js-vuejs/tree/master/demos/demo-vue-loader-example/demo1

目錄結構

- demo/
  + package.json //npm配置文件
  + webpack.config.js //webpack配置
  + index.html //頁面
  - node_modules //npm加載的模塊
  - src //開發資源目錄
    - assets //一些資源
      + logo.png  //圖片資源
    - components //vue組件
      + a.vue 
      + b.vue
      + counter.vue
    + app.vue //佈局文件
    + main.js  //入口文件

初始化npm

1.生成npm配置文件 package.jsoncss

npm init

2.能夠粘貼以下配置內容替換到package.json中，或者根據變更進行修改html

{
  "name": "demo_vue-loader-example",
  "version": "0.0.1",
  "description": "demo",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --quiet", 
    "build": "export NODE_ENV=production && webpack --progress --hide-modules"
  },
  "author": "dingyiming",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.1.18",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-stage-0": "^6.1.18",
    "babel-runtime": "^6.2.0",
    
    "css-loader": "^0.23.0",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "stylus-loader": "^1.4.2",
    
    "file-loader": "^0.8.5",
    "jade": "^1.11.0",
    "template-html-loader": "0.0.3",
    
    "vue-hot-reload-api": "^1.2.1",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^7.1.4",
    
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "vue": "^1.0.10"
  }
}

3.下載node模塊vue

npm install

其實我是一條條用npm i xxx --save-dev敲的，沒有在package.json裏面的"devDependencies":{}手動添加內容，能夠一個個裝（也能夠一塊兒敲）如 npm i webpack --save-dev,npm i vue --save

--save-dev 把依賴名和版本要求放在了 "devDependencies":{}，

--save 放在了 "dependencies":{}

每敲一個下載完後能夠看到"devDependencies":{}依賴內容的添加

新建index.html用於展現最終頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue Webpack Example</title>
</head>
<body>
<app></app>
<script src="dist/build.js"></script>
</body>
</html>

新建webpack.config.js用於配置webpack

var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: './dist',
    publicPath: 'dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        // edit this for additional asset file types
        test: /\.(png|jpg|gif)$/,
        loader: 'file?name=[name].[ext]?[hash]'
      }
    ]
  },
  // example: if you wish to apply custom babel options
  // instead of using vue-loader's default:
  babel: {
    presets: ['es2015', 'stage-0'],
    plugins: ['transform-runtime']
  }
}

if (process.env.NODE_ENV === 'production') {
  module.exports.plugins = [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ]
} else {
  module.exports.devtool = '#source-map'
}

新建src目錄用於存放開發文件

新建入口文件`main.js`

var Vue = require('vue')
var App = require('./app.vue')

new Vue({
  el: 'body',
  components: {
    app: App
  }
})

新建組件佈局文件`app.vue`

組件佈局將在這裏設置，.vue文件將由vue-loader進行加載，.vue內同時包含html、css、js源碼，使組件的獨立，組件之間能夠儘量地解耦，便於開發維護node

<template lang="jade">
div
  img(class="logo", src="./assets/logo.png")
  h1 {{msg}}
  comp-a
  comp-b
  counter
</template>

<script>
import CompA from './components/a.vue'
import CompB from './components/b.vue'
import Counter from './components/counter.vue'
export default {
  data () {
    return {
      msg: 'Hello from vue-loader!'
    }
  },
  components: {
    CompA,
    CompB,
    Counter
  }
}
</script>

<style lang="stylus">
font-stack = Helvetica, sans-serif
primary-color = #999
body
  font 100% font-stack
  color primary-color
.logo
  width 40px
  height 40px
</style>

新建components文件夾

用於開發具體的子組件，均以.vue的後綴呈現webpack

a.vue

<style scoped>
.container {
  border: 1px solid #00f;
}
.red {
  color: #f00;
}
</style>

<template>
  <div class="container">
    <h2 class="red">{{msg}}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello from Component A!'
    }
  }
}
</script>

b.vue

<style scoped>
.container {
  border: 1px solid #f00;
}
h2 {
  color: #393;
}
</style>

<template>
  <div class="container">
    <h2>Hello from Component B!</h2>
  </div>
</template>

counter.vue

<template>
  <div>
    <h1>I am a Counter Component. Edit me in dev mode.</h1>
    <p>Current count: {{count}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return { count: 0 }
  },
  ready () {
    this.handle = setInterval(() => {
      this.count++
    }, 1000)
  },
  destroyed () {
    clearInterval(this.handle)
  }
}
</script>