- 来自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
- 生成npm配置文件 package.json
npm init
- 可以粘贴如下配置内容替换到package.json中,或者根据变动进行修
改
{
"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用于展示最终页面
Vue Webpack Example
新建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源码,使组件的独立,组件之间可以尽可能地解耦,便于开发维护
div
img(class="logo", src="./assets/logo.png")
h1 {{msg}}
comp-a
comp-b
counter
新建components文件夹
用于开发具体的子组件,均以.vue的后缀呈现
- a.vue
{{msg}}
- b.vue
Hello from Component B!
- counter.vue
I am a Counter Component. Edit me in dev mode.
Current count: {{count}}
新建assets文件夹用于放一些资源
- 此项目下有一张图
打包运行查看
- 打包:
npm run build
- 运行
npm run dev
- 查看
浏览器中访问 localhost:8080
原文: https://segmentfault.com/a/1190000004060034 丁一鸣