9

目录结构

- 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.json

npm init

2.可以粘贴如下配置内容替换到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"
  }
}

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>

<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的后缀呈现

  • 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有了更好的认识,不过还是得接下来多练习练习,加强熟悉度。

你可能感兴趣的

35 条评论
mumofa · 2016年01月06日

报了一堆错误 Orz
ERROR in ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./s
rc/app.vue
Module build failed: SyntaxError: C:\Users\admin\Desktop\webpack\package.json: E
rror while parsing JSON - Unexpected end of input

at Object.parse (native)
at OptionManager.addConfig (C:\Users\admin\Desktop\webpack\1_6_自己的Vue\nod

e_modules\babel-core\lib\transformation\file\options\option-manager.js:214:62)

at OptionManager.findConfigs (C:\Users\admin\Desktop\webpack\1_6_自己的Vue\n

ode_modules\babel-core\lib\transformation\file\options\option-manager.js:370:30)

at OptionManager.init (C:\Users\admin\Desktop\webpack\1_6_自己的Vue\node_mod

ules\babel-core\lib\transformation\file\options\option-manager.js:412:12)

at File.initOptions (C:\Users\admin\Desktop\webpack\1_6_自己的Vue\node_modul

es\babel-core\lib\transformation\file\index.js:191:75)

at new File (C:\Users\admin\Desktop\webpack\1_6_自己的Vue\node_modules\babel

-core\lib\transformation\file\index.js:122:22)

at Pipeline.transform (C:\Users\admin\Desktop\webpack\1_6_自己的Vue\node_mod

ules\babel-core\lib\transformation\pipeline.js:42:16)

at transpile (C:\Users\admin\Desktop\webpack\1_6_自己的Vue\node_modules\babe

l-loader\index.js:14:22)

at Object.module.exports (C:\Users\admin\Desktop\webpack\1_6_自己的Vue\node_

modules\babel-loader\index.js:88:12)
@ ./src/app.vue 3:17-117

+3 回复

小虫哥哥 · 2015年11月29日

这么复杂,好吓人

回复

丁一 作者 · 2015年11月29日

额,哪里不明白?

回复

夜聆风 · 2015年11月30日

jade这东西有必要吗 看不懂语法, 昨天也顺利搭起来了 搭建确实不太简单

回复

丁一 作者 · 2015年11月30日

额。jade就是蛮简约的,看起来会舒服些,可用可不用的,算是个扩展吧,可能刚开始接触会有点反感,不过在这里作者其实就是想通过演示告诉我们vue-loader能加载多种多样的东西罢了,加油

回复

fuxiao · 2015年11月30日

写的很好,感谢分享。

回复

fuxiao · 2015年11月30日

在公司里面进行团队协作开发都是差不多的呦~~~加油!

回复

丁一 作者 · 2015年11月30日

感谢感谢,我也是初学,,

回复

zero23715 · 2015年12月29日

照着走了遍,算是有了点概念,谢谢

回复

丁一 作者 · 2015年12月29日

谢谢,我也是通过这个有了些概念,共勉

回复

mumofa · 2016年01月06日

你好 我run build的时候报错了
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using npm@2.11.3
3 info using node@v0.12.7
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info prebuild demo_vue-loader-example@0.0.1
6 info build demo_vue-loader-example@0.0.1
7 verbose unsafe-perm in lifecycle true
8 info demo_vue-loader-example@0.0.1 Failed to exec build script
9 verbose stack Error: demo_vue-loader-example@0.0.1 build: export NODE_ENV=production && webpack --progress --hide-modules
9 verbose stack Exit status 1
9 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:213:16)
9 verbose stack at EventEmitter.emit (events.js:110:17)
9 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at ChildProcess.emit (events.js:110:17)
9 verbose stack at maybeClose (child_process.js:1015:16)
9 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid demo_vue-loader-example@0.0.1
11 verbose cwd C:\Users\admin\Desktop\webpack\1_6_自己的Vue
12 error Windows_NT 6.3.9600
13 error argv "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
14 error node v0.12.7
15 error npm v2.11.3
16 error code ELIFECYCLE
17 error demo_vue-loader-example@0.0.1 build: export NODE_ENV=production && webpack --progress --hide-modules
17 error Exit status 1
18 error Failed at the demo_vue-loader-example@0.0.1 build script 'export NODE_ENV=production && webpack --progress --hide-modules'.
18 error This is most likely a problem with the demo_vue-loader-example package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error export NODE_ENV=production && webpack --progress --hide-modules
18 error You can get their info via:
18 error npm owner ls demo_vue-loader-example
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

回复

丁一 作者 · 2016年01月06日

看样子是在windows下的情况,是否要升级下node版本?还是什么其他情况,我用的mac,可能环境有点不同,你把build后面的改成webpack试试看呢,就是不去做node环境判断了

回复

mumofa · 2016年01月06日

我是在公司的电脑操作的 公司项目用的框架用的低版本的node 我也不清楚是不是node版本问题

2:你把build后面的改成webpack试试看呢,就是不去做node环境判断了
这个不清楚 请问要怎么改?

回复

丁一 作者 · 2016年01月06日

哦哦,就是在 package.json里面有一行

 "build": "export NODE_ENV=production && webpack --progress --hide-modules"

改成

"build": "webpack"

试试看

回复

丁一 作者 · 2016年01月06日

建议还是升级node试试吧

回复

mumofa · 2016年01月07日

作者~我今天早上又尝试了一下 把node换成了4.2.4 然后直接下载你的demo
发现build的时候会出错
然后把build的语句改成"build": "webpack" 就成功了
请问这是什么问题 0 0

回复

丁一 作者 · 2016年01月07日

额,我还是怀疑node版本,我是5.0的node了

回复

mumofa · 2016年01月07日

原来如此 打扰你了~

回复

丁一 作者 · 2016年01月07日

不客气,我也只是初学,也不大懂,慢慢摸索吧

回复

mumofa · 2016年01月07日

作者 又有个疑问了
我把那些代码都换成普通状态 然后计时器那里写成了
ready : function(){

   console.log(this.count);
  this.handle = setInterval(function(){
    console.log(this.count);
    this.count++;
  },1000)
}

可是输出的count不是data里面的count 是underfind 但是在定时器外面输出count却又可以输出数字

回复

载入中...