vue2.0 写一个简易组件

作者: 55lover | 来源:发表于2018-03-17 17:09 被阅读0次

vue2.0 写一个简易组件
Vue2.0-Vue3.0语法差异性总结
vue2.0中keep-alive实践
VUE之keep-alive的使用
树形结构递归/原生js实现/vue递归组件
vue2.0 keep-alive
VUE设置缓存
vue2.0 keep-alive最佳实践
vue组件传值和函数调用
vue-router 和keep-alive

首先创建一个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/

vue2.0 写一个简易组件
首先创建一个vue项目有很多方式可以通过vue-cli创建这里呢，我会通过npm init 创建再来配置webp...
Vue2.0-Vue3.0语法差异性总结
Vue2.0 Vue2.0实例 Vue2.0 组件使用组件的细节在 ttable > tbody > tr 使...
vue2.0中keep-alive实践
vue2.0中keep-alive实践 vue2.0提供了一个keep-alive组件，用来缓存组件,避免多次加载...
VUE之keep-alive的使用
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 [code] <...
树形结构递归/原生js实现/vue递归组件
原生js实现递归渲染 Vue2.0递归组件
vue2.0 keep-alive
参考 1.用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 ...
VUE设置缓存
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗可以通过初始化时...
vue2.0 keep-alive最佳实践
1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗有...
vue组件传值和函数调用
1，父组件传值给子组件 vue2.0 vue3.0(provide（提供）/inject（注入）用法) 2，父组件...
vue-router 和keep-alive
keep-alive的介绍基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的...