【vue】vue组件化开发初体验-示例vue-loader-example学习记录

目录结构

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


前端专精
不负好时光,专精好前端
1 篇内容引用

[链接]

944 声望
80 粉丝
0 条评论
推荐阅读
hello-weapp微信小程序最简示例教程
[链接] 仓库:[链接] 打开微信小程序官方开发文档,最好全篇看一遍,基本上就会了。 点击文档中 工具 选项卡中 下载工具页面 下载对应系统版本的微信开发者工具 注意:脱离微信开发者工具是不能调试的 好了,安装...

丁一阅读 5.5k评论 1

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木149阅读 12.2k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图

[链接]

944 声望
80 粉丝
宣传栏