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
  1. 通过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"
}
  1. 我们是构建vue组件 自然是基于Vue上,所以得安装vue2.0,又因为vue是我们在项目运行中也会用到的,所以应该安装到dependencies里面,即:npm i vue -S | npm install vue --save-dev 如果使用npm过慢,可以使用cnpm淘宝镜像。
  2. 需要安装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/

推荐阅读更多精彩内容