vue2.0 写一个简易组件
本文地址: ()
avatar
作者: FeRookie 类型: 原创
更新时间:2022-06-26 阅读:232

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

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