vue2.0 写一个简易组件

首先创建一个vue项目有很多方式
可以通过vue-cli创建
这里呢，我会通过npm init 创建再来配置webpack一步一步讲解，然后实现vue-cli创建一个vue init webpack-simple test2的原理
最终构建成的目录是这样的：
test2

src
- components
  - page
    - page.vue
    - index.js
- App.vue
- main.js
index.html
package.json
.editorconfig
.babelrc
.webpack.config.js
README.md

通过npm init 构建一个package.json
这样会依次创建package.json的重要属性：
- name : 项目或是第三方包的名称,也是其它项目导入时require()中的名称
- description : 这个项目或是第三方包功能的描述
- main : 项目或是第三方包的入口文件
- license : 授权方式,一般写MIT
- keywords : 发布到npmjs中之后,其它开发者搜索我们这个第三方包的关键
  字
- scripts : 以后在终端执行的脚本
- devDependencies : 开发阶段依赖的包
- dependencies : 运行阶段依赖的包
- author : 作者
- version : 版本号
  也可以通过npm init -y ，这样会自动创建package.json 如果要修改里面的属性，可以去文件中修改，这种创建方式 license默认值是ISC

{
  "name": "test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

我们是构建vue组件自然是基于Vue上，所以得安装vue2.0，又因为vue是我们在项目运行中也会用到的，所以应该安装到dependencies里面，即：npm i vue -S | npm install vue --save-dev 如果使用npm过慢，可以使用cnpm淘宝镜像。
需要安装webpack，首先需要了解webpack配置， webpack有两大特性：

code splitting （自动完成的）
loader 可以处理各种类型的静态文件，并且还支持串联操作，所以我们需要css-loader style-loader vue-loader file-loader等这里不多说这些插件，直接上代码：

  "name": "test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8899",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "author": "xxx",
  "license": "MIT"
}

然后直接通过npm install
最后配置webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  // 入口文件
  entry: './src/main.js',
 // 输出目录
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    // 处理各种静态文件的规则
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test:/\.css$/,
        loader:'style-loader!css-loader'
      }
    ]
  },
  // 模块解析
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  // chorme工具可调试分析的.map文件
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  // 各种插件 plugin
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

然后写入口文件 main.js 和页面入口index.html

// maim.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  // 绑定页面入口的id
  el: '#app',
  render: h => h(App)
})

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test-component</title>
  </head>
  <body>
    <div id="app"></div>
    <!--输出目录路径 /dist/build.js-->
    <script src="/dist/build.js"></script>
  </body>
</html>

配置完成后，可在App.vue里随便写点 npm run dev 测试一下
现在开始写组件先进入page.vue
vue文件包含三部分 template script style 这三个啥意思就不讲了哈，直接上代码

<template>
  <div class="pageloading" v-show="shows">
      <div class="sk-rotating-plane"></div>
  </div>
</template>
<script>
  export default {
    name: 'pageloading',
    // 写组件时 通过props 实现父组件到子组件的数据传递 这个是必须的 
    props: {
      // 使用组件时的名字 :dp-show
      dpShow: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        shows: this.dpShow
      }
    },
    mounted () {}
  }
</script>
<style scoped>
  .pageloading{
    position: fixed;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    background-color: rgba(24, 170, 207, 0.5);
    z-index: 9999;
}
.sk-rotating-plane {
  width: 40px;
  height: 40px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
          animation: sk-rotatePlane 1.2s infinite ease-in-out; }
@-webkit-keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
@keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
</style>

这样就完成了一个组件的编写
那么，我们该怎么用呢
举例方法一（不推荐）我们在App.vue中使用page.vue

<template>
  <div claas="app">
    <pageloading :dp-show="false"></pageloading>
    <div><span>{{msg}}</span></div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import page from './components/page'
  Vue.use(page)
  export default {
    name: 'app',
    data() {
      return {
        msg: '这是一个练习组件'
      }
    },
    mounted() {}
  }
</script>
<style></style>

方法二（推荐）

// 我们更改main.js
import Vue from 'vue'
import App from './App.vue'
import page from './components/page'
Vue.use(page)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  page,
  render: h => h(App)
})
// App.vue
<template>
  <div claas="app">
    <pageloading :dp-show="true"></pageloading>
    <div><span>{{msg}}</span></div>
  </div>
</template>
<script>
  export default {
    name: 'app',
    data() {
      return {
        msg: '这是一个练习组件'
      }
    },
    mounted() {}
  }
</script>
<style></style>

因此我们只需控制属性:dp-show来操作组件当然你可以添加其他属性来控制组件这里不多说自己发挥
到这里就完成了组件的编写
最后，我们如果想发布到npm上面去，让别人可以通过npm install xxx(你的模块名)来安装，先检查你的packjson 的main 属性设置为："main":"dist/build.js" ，然后通过npm publish发布
发布包到npm 上去相关步骤与注意事项可查看http://blog.csdn.net/itzhongzi/article/details/69525930这篇文章

希望大家能多多支持，我是一个前端开发者，业余时间自学Node, Mysql, Python等服务端语言。
博客地址：网站：http://www.55lover.com/
移动端：http://m.55lover.com/

最后编辑于：2018.03.17 20:18:46

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,015评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,262评论 1赞 292
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,727评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,986评论 0赞 205
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,363评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,610评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,871评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,582评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,297评论 1赞 242
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,551评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,053评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,385评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,035评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,079评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,841评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,648评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,550评论 2赞 270

vue2.0 写一个简易组件

推荐阅读更多精彩内容