vue组件化开发初体验-示例vue-loader-example学习记录
2017-04-11 18:10
603 查看
目录结构
- 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.jsonnpm init
2.可以粘贴如下配置内容替换到package.json中,或者根据变动进行修改
{ "name": "demo_vue-loader-example", "version": "1.0.0", "description": "demo", "main": "index.js", "scripts": { "dev": "webpack-dev-server --inline --hot --quiet", "build": "set NODE_ENV=production && webpack --progress --hide-modules" }, "author": "Solin", "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模块
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源码,使组件的独立,组件之间可以尽可能地解耦,便于开发维护
<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>
新建components文件夹
用于开发具体的子组件,均以.vue的后缀呈现
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
小结
经过通读官方文档和这个源码示例多少对vue有了更好的认识,不过还是得接下来多练习练习,加强熟悉度。
相关文章推荐
- vue组件化开发初体验-示例vue-loader-example学习记录
- 【vue】vue组件化开发初体验-示例vue-loader-example学习记录
- 【vue】vue组件化开发初体验-示例vue-loader-example学习记录
- vue学习(二):组件化开发
- Vue-router 类似Vuex实现组件化开发的示例
- 微擎/微赞开发示例 学习记录
- vue学习记录——父子组件间传递数据
- vue.js组件化开发实践
- MongoDB实战开发 【零基础学习,附完整Asp.net示例】
- IOS开发学习过程问题点记录
- 整合之前的一些学习记录4(java开发环境配置相关)
- 学习使用Vue2.0于移动端开发
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
- STM32高级开发(9)-学习与编译libopencm3-example
- vue学习记录 第一章 初始vue
- MongoDB实战开发 【零基础学习,附完整Asp.net示例】
- Windows Embedded CE 6.0开发初体验(三)设置Boot-loader
- 【记录】Accelerated C++:Practical Programming by Example第0章:开始学习C++
- swift学习记录(iso开发设计性能提升)
- vue.js原生组件化开发(二)——父子组件