- 使用了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 //開發(fā)資源目錄
- assets //一些資源
+ logo.png //圖片資源
- components //vue組件
+ a.vue
+ b.vue
+ counter.vue
+ app.vue //布局文件
+ main.js //入口文件
初始化npm
- 生成npm配置文件 package.json
npm init
- 可以粘貼如下配置內容替換到package.json中，或者根據(jù)變動進行修
改
{
"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"
}
}
- 下載node模塊
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目錄用于存放開發(fā)文件
新建入口文件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源碼，使組件的獨立，組件之間可以盡可能地解耦，便于開發(fā)維護
<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文件夾
用于開發(fā)具體的子組件，均以.vue的后綴呈現(xiàn)
- 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>
新建assets文件夾用于放一些資源
- 此項目下有一張圖
打包運行查看
- 打包：
npm run build
- 運行
npm run dev
- 查看
瀏覽器中訪問 localhost:8080
