精华内容
下载资源
问答
  • 本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件。  本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习。  按照大佬文中写...
  • 主要介绍了vue自定义指令实现方法,结合实例形式分析了vue.js自定义指令相关定义、注册、使用方法及操作注意事项,需要的朋友可以参考下
  • vue自定义配置运行run命令

    千次阅读 2020-07-07 14:07:01
    vue自定义配置运行run命令1、vuecli3以下package.jsonbuild/build.jswebpack.prod.conf.jsbuild/utils.jsbuild/webpack.base.conf.jsbuild/vue-loader.conf.jsconfig文件夹index.jsvuecli3以下打包流程新增npm run ...

    vue运行根据npm和yarn不同有不同的指令,不过大同小异,常用的一般只有本地运行和线上打包指令,vuecli3以下的为 npm run dev(本地运行)、npm run build(线上打包);vuecli3及以上的为 npm run serve(本地运行)、npm run build(线上打包)。
    但是经常也会遇到一种情况:线上也会有不同的环境,常用的有开发环境、测试环境、UAT环境、正式生产环境等等,不同的线上环境最常见的区别往往是访问路径不同,请求地址不同,当然这些问题其实可以用Nginx反向代理解决,但还有一些特殊情况,比如某个功能只在正式生产环境开放,后端不方便用代码,那么此时就需要前端获取当前打包的环境,这就是自定义配置运行命令的意义所在,当你运行不同的指令生成不同环境的webpack包,必定可以获取到当前包的环境,可以在前端用代码控制实现不同环境有不同的显示操作
    vue自定义配置运行命令有两种,一种是vuecli3以下,此时webpack配置文件在本地,可以根据修改本地webpack配置文件进行自定义;一种是在vuecli3以上,此时webpack配置在服务器上,不能通过修改本地配置文件来进行自定义,则需要通过新建vue.config.js和.env.XXX文件来进行自定义,下面我会分别记录操作方法

    1、vuecli3以下

    此时webpack配置文件在本地,修改即可,只要知道webpack的打包流程,引用了哪些文件,然后就可以据此新增修改
    打包第一个文件肯定是package.json,每一个指令的执行都定义在此

    package.json

    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "unit": "jest --config test/unit/jest.conf.js --coverage",
        "e2e": "node test/e2e/runner.js",
        "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
        "test": "node build/test.js",
        "build": "node build/build.js"
      },
    

    首先看默认的npm run build打包,首先会执行build文件夹下的build.js文件

    build/build.js

    'use strict'
    require('./check-versions')()
    
    process.env.NODE_ENV = 'production'
    ...
    const webpack = require('webpack')
    const config = require('../config')
    const webpackConfig = require('./webpack.prod.conf')
    
    const spinner = ora('building for production...')
    spinner.start()
    
    rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
      if (err) throw err
      webpack(webpackConfig, (err, stats) => {
        spinner.stop()
        if (err) throw err
        process.stdout.write(stats.toString({
          colors: true,
          modules: false,
          children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
          chunks: false,
          chunkModules: false
        }) + '\n\n')
    
        if (stats.hasErrors()) {
          console.log(chalk.red('  Build failed with errors.\n'))
          process.exit(1)
        }
    
        console.log(chalk.cyan('  Build complete.\n'))
        console.log(chalk.yellow(
          '  Tip: built files are meant to be served over an HTTP server.\n' +
          '  Opening index.html over file:// won\'t work.\n'
        ))
      })
    })
    

    主要关注这两条

    const config = require('../config')
    const webpackConfig = require('./webpack.prod.conf')
    

    这说明build.js打包依赖config文件夹和webpack.prod.conf.js文件
    下面我们再看看webpack.prod.conf.js文件

    webpack.prod.conf.js

    'use strict'
    
    const utils = require('./utils')
    ......
    const config = require('../config')
    ......
    const baseWebpackConfig = require('./webpack.base.conf')
    ......
    
    const env = process.env.NODE_ENV === 'test'
      ? require('../config/test.env')
      : require('../config/prod.env')
    
    const webpackConfig = merge(baseWebpackConfig, {
      module: {
        rules: utils.styleLoaders({
          sourceMap: config.build.productionSourceMap,
          extract: true,
          usePostCSS: true
        })
      },
      devtool: config.build.productionSourceMap ? config.build.devtool : false,
      output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
      },
      plugins: [
        ......
    
        new OptimizeCSSPlugin({
          cssProcessorOptions: config.build.productionSourceMap
            ? { safe: true, map: { inline: false } }
            : { safe: true }
        }),
    
        new HtmlWebpackPlugin({
          filename: process.env.NODE_ENV === 'testing'
            ? 'index.html'
            : config.build.index,
          template: 'index.html',
          inject: true,
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
          chunksSortMode: 'dependency'
        }),
        ......
    
        // copy custom static assets
        new CopyWebpackPlugin([
          {
            from: path.resolve(__dirname, '../static'),
            to: config.build.assetsSubDirectory,
            ignore: ['.*']
          }
        ])
      ]
    })
    
    if (config.build.productionGzip) {
      const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
      webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' +
            config.build.productionGzipExtensions.join('|') +
            ')$'
          ),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    }
    
    if (config.build.bundleAnalyzerReport) {
      const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
      webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }
    
    module.exports = webpackConfig
    

    因为篇幅原因,我把一些注释和与打包无关的代码删掉了,这里重点关注三条

    const utils = require('./utils')
    
    const config = require('../config')
    
    const baseWebpackConfig = require('./webpack.base.conf')
    

    这说明webpack.prod.conf.js依赖config文件夹、webpack.base.conf.js文件和utils.js文件
    我们再来看看build/utils.js文件

    build/utils.js

    'use strict'
    const path = require('path')
    const config = require('../config')
    ......
    
    exports.assetsPath = function (_path) {
      let assetsSubDirectory = ''
      if (process.env.NODE_ENV === 'production') {
        assetsSubDirectory = config.build.assetsSubDirectory
      } else if (process.env.NODE_ENV === 'test') {
        assetsSubDirectory = config.test.assetsSubDirectory
      } else {
        assetsSubDirectory = config.dev.assetsSubDirectory
      }
    
      return path.posix.join(assetsSubDirectory, _path)
    }
    
    ......
    
    

    可以看出utils.js依旧依赖config文件夹

    build/webpack.base.conf.js

    'use strict'
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const vueLoaderConfig = require('./vue-loader.conf')
    
    ......
    
    let outputPath = config.build.assetsRoot
    let outputPublicPath = ''
    if (process.env.NODE_ENV === 'production') {
      outputPublicPath = config.build.assetsPublicPath
    } else if (process.env.NODE_ENV === 'test') {
      outputPath = config.test.assetsRoot
      outputPublicPath = config.test.assetsPublicPath
    } else {
      outputPublicPath = config.dev.assetsPublicPath
    }
    
    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: ['babel-polyfill', './src/main.js']
      },
      output: {
        path: outputPath,
        filename: '[name].js',
        publicPath: outputPublicPath
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
      module: {
        rules: [
          ...(config.dev.useEslint ? [createLintingRule()] : []),
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          ......
        ]
      },
      node: {
        setImmediate: false,
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
      }
    }
    

    可以看出webpack.base.conf.js除了依赖config文件夹和utils.js文件还有一个vue-loader.conf.js文件

    build/vue-loader.conf.js

    'use strict'
    const utils = require('./utils')
    const config = require('../config')
    const isProduction = (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test')
    
    let sourceMapEnabled = ''
    if (process.env.NODE_ENV === 'production') {
      sourceMapEnabled = config.build.productionSourceMap
    } else if (process.env.NODE_ENV === 'test') {
      sourceMapEnabled = config.test.productionSourceMap
    } else {
      sourceMapEnabled = config.dev.cssSourceMap
    }
    
    module.exports = {
      loaders: utils.cssLoaders({
        sourceMap: sourceMapEnabled,
        extract: isProduction
      }),
      cssSourceMap: sourceMapEnabled,
      cacheBusting: config.dev.cacheBusting,
      transformToRequire: {
        video: ['src', 'poster'],
        source: 'src',
        img: 'src',
        image: 'xlink:href'
      }
    }
    

    vue-loader.conf.js常规引用config文件夹和utils.js文件,就不单独讨论了

    config文件夹

    config文件夹下有多个文件,一般初始化至少有index.js、dev.env.js、prod.env.js,其中dev.env.js和prod.env.js里面是各自的专属配置,本文想要实现的功能就由此类文件来完成,每个文件里都可以配置不同的请求域名(当然也可以用Nginx反向代理),当前环境的标识等等

    index.js

    index.js里面就是config的常用配置,比如每个环境下的路径、目录、文件名等等配置都由此处配置

    'use strict'
    
    const path = require('path')
    
    module.exports = {
      dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},
        // Various Dev Server settings
        host: '0.0.0.0', // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, 
        useEslint: true,
        showEslintErrorsInOverlay: false,
        ......
      },
    
      build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        productionSourceMap: true,
        ......
      },
    
      test: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist-test/index.html'),
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist-test'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        ......
      }
    }
    

    vuecli3以下打包流程

    vuecli3以下打包流程
    上图就是vuecli3以下的webpack打包流程,可以看到webpack打包大概就用到这几个文件,当然背后还有更多的依赖,但是我们能控制的就这几个,那么想配置一个新的指令只要按照这个流程新增或者修改对应的文件就可以了,下面我以新增一个npm run test指令为例(因为我已经做完了这个,其实上面贴出来的代码细心的已经看到了)

    新增npm run test指令

    新增文件

    需要新增的文件有build/test.js、build/webpack.test.conf.js、config/test.env.js
    新增在我看来是最简单的,只需要照着build的文件复制一份改名,然后把代码里的config.build改为config.test,这里的config.build指的是config文件夹下index.js里的build对象,包含了打包时的一些配置,比如文件名,路径等等

    修改文件

    需要修改的文件有package.json、build/utils.js、build/webpack.base.conf.js、build/vue-loader.conf.js、config/index.js

    package.json

    package.json仿照build新增一条指令,运行build/test.js文件

    build/utils.js

    utils文件需要在以前判断的基础上加上一个test的判断
    更改前

    const assetsSubDirectory = process.env.NODE_ENV === 'production'
        ? config.build.assetsSubDirectory
        : config.dev.assetsSubDirectory
    

    更改后

    let assetsSubDirectory = ''
      if (process.env.NODE_ENV === 'production') {
        assetsSubDirectory = config.build.assetsSubDirectory
      } else if (process.env.NODE_ENV === 'test') {
        assetsSubDirectory = config.test.assetsSubDirectory
      } else {
        assetsSubDirectory = config.dev.assetsSubDirectory
      }
    

    build/webpack.base.conf.js、build/vue-loader.conf.js、config/index.js等其他文件参照build/utils,将原本只对production和dev的判断加上一个test的判断

    vuecli3以下自定义webpack打包指令小结

    1、在package.json新增一条指令
    2、根据新增指令在指定位置(通常是build文件夹)新增文件
    3、新增config文件夹下自定义配置文件
    4、修改config文件夹下index.js文件,新增对自定义配置
    5、新增webpack conf文件
    6、修改build/utils文件,增加对自定义的判断
    7、修改webpack.base.conf.js文件。增加对自定义的判断
    8、修改build/vue-loader.conf.js文件,增加对自定义的判断

    2、vuecli3以上

    此时webpack配置文件不在本地,想要修改打包配置需新建vue.config.js文件,vue.config.js文件和vuecli3以下时config文件夹下的index.js文件一样,保存默认的打包配置,当然如果没有.env.dev和.env.prod也可以新建,这两个.env文件和vuecli3以下时config文件夹下的.env文件一样,目的是保存当前环境下的配置。这几个文件都在vue项目第一级目录下,与src文件夹平级。

    vue.config.js

    const path = require('path');
    
    let outputDir = ''
    if (process.env.VUE_APP_CURRENTMODE === 'prod') {
        // 为生产环境修改配置...
        outputDir = 'dist';
    } else {
        // 为开发环境修改配置...
        outputDir = 'dist-test';
    }
    module.exports = {
        // 基本路径
        publicPath: './',
        // 输出文件目录
        outputDir,
        // eslint-loader 是否在保存的时候检查
        lintOnSave: true,
        configureWebpack: (config) => {
            config.entry.app = ["babel-polyfill", "./src/main.js"];
            
            if (process.env.NODE_ENV === 'production') {
                // 为生产环境修改配置...
                config.mode = 'production';
            } else {
                // 为开发环境修改配置...
                config.mode = 'development';
            }
    
            Object.assign(config, {
                // 开发生产共同配置
                resolve: {
                    alias: {
                      '@': path.resolve(__dirname, './src'),
                      '@a': path.resolve(__dirname, './src/api'),
                      '@u': path.resolve(__dirname, './src/utils'),
                      '@p': path.resolve(__dirname, './src/pages'),
                      '@c': path.resolve(__dirname, './src/components'),
                    }
                }
            });
        },
        // 生产环境是否生成 sourceMap 文件
        productionSourceMap: true,
        // enabled by default if the machine has more than 1 cores
        parallel: require('os').cpus().length > 1,
        // PWA 插件相关配置
        // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
        pwa: {},
        // webpack-dev-server 相关配置
        devServer: {
            open: process.platform === 'darwin',
            host: '0.0.0.0',
            port: 8888,
            https: false,
            hotOnly: false,
        },
        // 第三方插件配置
        pluginOptions: {
            // ...
        }
    };
    

    新增npm run test指令

    新增文件

    新增.env.test文件,仿照.env.prod新建,NODE_ENV最好和prod一样,为做区分可以配置一个字段如VUE_APP_CURRENTMODE为test与prod区分开,如果需要判断当前环境可以用此字段判别

    NODE_ENV = 'production'
    VUE_APP_CURRENTMODE = 'test'
    

    修改文件

    修改vue.config.js,增加对VUE_APP_CURRENTMODE的判断
    修改前

    const path = require('path');
    
    module.exports = {
        // 基本路径
        publicPath: './',
        // 输出文件目录
        outputDir,
        ......
    }
    

    修改后

    const path = require('path');
    
    let outputDir = ''
    if (process.env.VUE_APP_CURRENTMODE === 'prod') {
        // 为生产环境修改配置...
        outputDir = 'dist';
    } else {
        // 为开发环境修改配置...
        outputDir = 'dist-test';
    }
    module.exports = {
        // 基本路径
        publicPath: './',
        // 输出文件目录
        outputDir,
        ......
    }
    

    vuecli3以上自定义webpack打包指令小结

    1、默认需有.env.dev、.env.prod、vue.config.js文件,如无可新建
    2、新增.env.test文件
    3、修改vue.config.js文件

    展开全文
  • vue-cli打包 npm run serve 是不压缩文件,直接加载源码,并且此时的process.env.NODE_ENV是development npm run build 命令会打包代码,并且此时的process.env.NODE_ENV是production 在发送请求的时候通过...

    用vue-cli跑项目的命令:

    npm  run serve 是不压缩文件,直接加载源码,并且此时的process.env.NODE_ENV是 development

    npm run build   命令会打包代码,并且此时的process.env.NODE_ENV是 production

    因此在发送请求的时候通过process.env.NODE_ENV就能很好的区分要请求的后端接口路径

    但是最近遇到一个问题,我想要打包之后的代码分成测试环境和生产环境,但是通过npm run build打包之后的process.env.NODE_ENV统一都是production,就无法区分了,小朋友你是否有很多问号,接下来就说一下我的解决方案八

     

    1.在package.json中,添加一句打包到测试环境的命令

      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build --mode build",
        "test": "vue-cli-service build --mode test",
      },

    2.在根目录创建.env.test和.env.build文件(文件名的后缀要和package.json中配置mode的一样,开头统一为.env),增加变量VUE_APP_TITLE,注意变量名必须是VUE_APP_开头才可以

    .env.build

    NODE_ENV = 'production'
    VUE_APP_TITLE = 'production'
    

    .env.test 这里写NODE_ENV 是production是为了让test环境打包之后的结果和production一致

    NODE_ENV = 'production'
    VUE_APP_TITLE = 'test'
    

    3.以上两步环境打包就已经配置好了,接下来是运行命令,分别执行npm run build 和 npm run test,并打印出process.env.VUE_APP_TITLE,就能看到不同的打包命令生成的process.env.VUE_APP_TITLE是不一样的

    4.根据process.env.VUE_APP_TITLE区分请求接口的地址

    let api = "https://api.development.yazhishaw.com"; // 默认不打包请求开发环境的接口
    console.log("env", process.env.VUE_APP_TITLE);
    
    if (process.env.VUE_APP_TITLE === "production") { // production环境请求生产环境接口
      api = "https://api.production.yazhishaw.com";
    } 
    else if (process.env.VUE_APP_TITLE === "test") { // test环境请求测试环境接口
      api = "https://api.test.yazhishaw.com";
    } 

    5.然后就可以调用不用环境的接口了,比如:

    // 根据省市获取医院
    export async function getAreaSearchApi(query = {}) {
      const resp = await axios.get(
        `${api}/national-hospital/search`,
        {
          params: query,
        }
      );
      return resp.data;
    }

     

    展开全文
  • VS Code 自定义vue代码片段

    千次阅读 2018-07-03 17:33:40
    1:按F1或ctrl+shift+p打开命令窗口2:输入snippet,选择 “首选项:打开用户代码段”3:输入vue,如果列表中存在Vue,可直接点击打开vue.json设置文件,如果列表中不存在Vue,按第4步做,如果Vue已存在,直接跳到第...

    1:按F1或ctrl+shift+p打开命令窗口

    2:输入snippet,选择 “首选项:打开用户代码段”

    3:输入vue,如果列表中存在Vue,可直接点击打开vue.json设置文件,如果列表中不存在Vue,按第4步做,如果Vue已存在,直接跳到第9步

    4:安装插件VueHelper

    5:安装插件vetur

    6:文件-首选项-用户设置,打开设置文件, 设置:

    "files.associations": {
            "*.vue": "vue"

        }

    7:重启 VS Code

    8:重新启动 VS Code 后,从第1步再来一遍,应该能跳到第9步

    9:在已打开的vue.json文件中粘贴

    "Print to vue-template": {
    "prefix": "vue",
    "body": [
    "<template>",
    "\t<div>\n\t\t$1",
    "\t</div>",
    "</template>\n",
    "<script>",
    "\texport default {",
    "\t\tdata () => ({\n",
    "\t\t}),",
    "\t\tcomponents: {\n",
    "\t\t}",
    "\t}",
    "</script>\n",
    "<style>\n\t",
    "</style>"
    ],
    "description": "vue 模板代码片段"

    }

    10:保存文件,打开任意vue类型文件,输入“vue”,回车直接显示之前设置的代码片段


    展开全文
  • 自定义vue的UI组件库

    2020-05-27 20:57:02
    学完vue使用了element-ui 有没有想自己封装一个ui库 不求多好看,只求学习一个技能或者一个知识点,那我可以帮到你,如果你喜欢请点个赞再走吧。 分几步 第一步是注册npm账号 这个自行搜索 第二步是自己封装一个组件...

    学完vue使用了element-ui 有没有想自己封装一个ui库 不求多好看,只求学习一个技能或者一个知识点,那我可以帮到你,如果你喜欢请点个赞再走吧。
    小提示 千万别在props子组件里面直接改父组件的值 需要data过渡赋值一下
    分几步
    第一步是注册npm账号 这个自行搜索
    第二步是自己封装一个组件
    在这里插入图片描述
    这张图

    是一个ui组件库基本的结构
    publishedliu 是组件库的名字 这个名字的文件夹下面
    包含一个src 一个package.json文件

    这是用来解释main执行index.js发生了什么 看到这可能迷糊别急 这是解释json里面的main键值对的意思

    import Button from 'publishedliu'
    Vue.use(Button)//Button其实是导出了install与Button是组件Checkbox也是
    执行use的时候 其实是把所有的外部组件全部定义为全局组件 通过install方法
    

    index.js文件

    import Button from './components/button/index';
    import Checkbox from './components/Checkbox/index';
    const components = [
      Button,
      Checkbox,
    ];
    const install = function(Vue, opts = {}) {//vue插件的用法install
      components.forEach(component => {
        Vue.component(component.name, component);
      });
    };//install是默认方式与vue.use()结合
    export default {
     install
    };
    
    {
      "name": "publishedliu",//包的名字
      "version": "1.0.0",//版本 可以 自行修改
      "description": "组件库",//上传成功之后npm库里的提示
      "author": "liuyong-byte <1256230450@qq.com>",//是你创建npm账号的邮箱
      "private": false,//这个一定改成false 用于上传npm的时候
      "main": "./src/index.js",//是执行文件夹
      "files": [//上传组件库必须要的文件
        "src/components/*",//上传这个文件夹下面所有文件
        "src/index.js"//导出ui库的时候执行文件 个人觉得这个月理解容易一些
      ],
      "__npminstall_done": "Wed May 27 2020 10:54:02 GMT+0800 (GMT+08:00)",
      "_from": "publishedliu@1.0.0",
      "_resolved": "https://registry.npm.taobao.org/publishedliu/download/publishedliu-1.0.0.tgz"
    }
    

    这个是帮助你切换npm镜像与cnpm淘宝使用的

    1.设置使用淘宝cnpm
    
    npm config set registry https://registry.npm.taobao.org
    2.查看是否配置成功,成功后即可直接使用cnpm命令
    
    npm config get registry
    3.还原npm仓库
    
    npm config set registry https://registry.npmjs.org
    

    组件封装 比如上面的Button组件
    插槽的那一期https://blog.csdn.net/qq_43505774/article/details/106303148

    <template>
        <button class="L-but" :style="{color:this.fColor,backgroundColor:this.bgColor}" @click="click">
            <slot>按钮</slot>//默认插槽 父组件分发子组件
        </button>
    </template>
    
    <script>
    export default {
        name:"Button",//这个很重要 很重要 是上面的component.name的参数
        //当你导入组件库之后输入的Button组件 它就会找到这个name进行加载 个人理解
        props:{//这个是父组件传参个子组件
            bgColor:{
                type:String,
                value:"skyblue"
            },
            fColor:{
                type:String,
                value:"white"
            }
            
        },
        data() {
            return {
                
            }
        },
        methods:{
            click:function(e){//这个是子组件与父组件通信
            //通信有很多种 attr libar vue.$emit props options slot vuex provide inject等等
                this.$emit('click自定义随便都可以',e)//当点击子组件的时候 父组件通过click方法获取值 @父组件方法 与click 同名就ok
            }
        }
    }
    </script>
    
    <style scoped>//这是style作用域 当然了你也可以使用less sass 或者src连接
    .L-but{
        border: 1px solid white;
    }
    </style>
    

    现在是上传组件
    在登录之前需要切换为npm 源 而不是淘宝cnpm
    npm login 登录
    输入username password email
    然后没有报错 就npm publish
    可能会报错 json文件的name名字冲突
    如果需要跟换版本号 直接可以在json里面修改 就ok 也可以命令自行搜索
    我认为直接修改方便一点

    当上传成功 需要等几分钟 cnpm才会映射到 所以先用npm下载
    npm install 包名

    当你导入ui组件库的时候 它会自动加载执行src 下面的index文件
    把组件库导出来
    然后vue.use成为全局组件
    就 ok了

    Button 里面的index.js文件内容 也很重要

    import Button from './button.vue';
    
    /* istanbul ignore next */
    // Button.install = function(Vue) {
    //   Vue.component(Button.name, Button);
    // }; 这个你如果重复写在每一个组件index.js里面 那你没必要
    //在src的index里面install循环了
    
    export default Button;
    
    展开全文
  • 在工作当中,遇到了下面这个问题: 测试环境与生产环境中的用户权限不一样,因此,就需要根据测试环境打一个包,生产环境又打一个包。 可是,如果每次打包都需要更改权限的配置文件的话,会很麻烦,而且,体现不出...
  • 搭建Vue项目一. 安装node二. 全局安装 vue-cli(脚手架)三. 在需要的位置创建项目打开 操作窗口 执行 ''vue create 项目名"1. 在需要的位置 `Shift + 右键` 点击 "在此处打开 Powershell 窗口"2. 复制需要创建项目的...
  • 创建空文件夹–命令:npm init -y 创建index.js exports.testDemo = function() { console.log("this is test demo!!!!!!"); }; 创建vue文件 注册npm账户,并且邮箱激活 npm adduser 登录 npm publish ...
  • vue自定义指令

    万次阅读 2019-06-13 16:54:29
    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令 下面定义了一个v-test指令绑定数据name <template> <...
  • 通过局部自定义指令实现了一个拖动的指令 html: <div xss=removed v-drag={set:set}></div> script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(el,binding...
  • 而且,更重要的事情是我需要通过自定义命令来运行 devlopment 和 production 两种项目环境。 自定义命令工具——flask-cli 在Flask 1.0+ 中已经支持了flask-cli,在翻阅了flask-cli文档之后,发现文档中提供的...
  • 一个集成了webpack + vue-loader + vuex + axios的自定义vue-cli模板,其中包含webpack热更新,linting,测试以及css处理器等内容 该模板兼容Vue2.0。对于Vue1.x,执行命令: vue init Brickies/vue-template#1.0 my...
  • 创建vue页面,快速初始化文件 1、点击vscode左下角的设置图标 2、选择用户代码片段 3、将以下代码复制到文件中的一对{}内 4、添加完成之后保存,当我们输入vue再单击Tab键,就可以初始化文件了 prefix是触发代码...
  • 常规的vue init template &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;project-name&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;脚手架不能满足需要 因此希望...
  • Vue自定义指令

    万次阅读 2018-07-18 10:05:04
    1、自定义指令:使用Vue.directive(id,definition)注册全局自定义指令,使用组件的directives选项注册局部自定义指令。 2、钩子函数: 指令定义函数提供了几个钩子函数(可选): bind:只调用一次,指令第一次...
  • 自定义配置 VUE 模板

    2021-03-08 15:11:18
    自定义配置 VUE 模板 这里以配置 VS code为例 前提已经安装了 vuevue-cli 插件 安装 命令 npm install vue vue-cli -D 把你的全局片段。每个代码片段在一个代码片段名称下定义,并具有范围、前缀、正文和...
  • Vue自定义命令

    2017-08-28 15:45:37
    自定义指令分为两个部分: 1-元素指令 2-属性指令 元素指令相当于定义一个轻量级的组件 对于指令这里需要讲解一下钩子函数,对于Vue.js提供了几个钩子函数,这几个钩子函数之间都是可选的,相互并不制约。钩子...
  • 提到 vue-cli,官方文档对其的介绍如下: A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具。 说白了,vue-cli 其实就是一个基于webpack构建,可以让用户快速初始化一个项目...
  • Vue自定义指令 Gestrue.js /** * Jerry * press 长按 参数:长按时长毫秒 * tap 点击事件 */ const myGesture = {}; // eslint-disable-next-line function gestrue(Vue, options) { let timeCounter = 0; /...
  • Vue CLI 命令行打包配置自定义参数

    千次阅读 2020-03-31 00:00:49
    Vue CLI 命令行打包配置自定义参数前言重点 vue.config.js在 vue.config.js 文件中计算环境变量配置代码命令日志使用扩展彩蛋 前言 难点来自于需求,好????那我们就说说我是因为什么需求呢? 需求:我要通过【页面...
  • vue3.0自定义指令实现

    2021-07-13 16:35:46
    Vue-cli 3.x 自定义指令1.vue-cli中新建指令集文件夹2.写入指令3.main.js中引入4.组件中使用 本文例子是自定义指令实现防抖和节流,其它指令实现类似 1.vue-cli中新建指令集文件夹 在src目录下创建directives文件夹...
  • Vue自定义项目的创建

    2021-07-21 15:47:34
    All Right 这里是Vue自定义项目创建 话不多说 主要有如下的几步。这里默认你已经装完脚手架啥的。 1.在命令行中输入 vue create 项目名 我这里是test 2.进入如下页面,你要选择的是第三个那个自定义Manually select...
  • 自定义yarn运行vue项目命令

    万次阅读 2019-07-31 09:46:05
    在项目中的package.json文件的scripts块中可以看到新项目的yarn命令集合 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", ...serve 就是vue项目的启动命令,可以通过修...
  • vue3.0中自定义指令的使用

    千次阅读 2021-03-01 17:46:23
    vue3.0中使用我们的自定义指令。 实现步骤:(全局定义点击的自定义属性) 1、src/ 新建文件夹 directives,新建index.js export default (app) => { //自定义组件 app.directive('demo', (el, binding) ...
  • vue自定义指令原理

    千次阅读 2020-05-05 20:03:07
    指令本质上是装饰器,是vue对HTML元素的扩展,给HTML元素增加自定义功能,语义化HTML标签。vue编译DOM时,会执行与指令关联的JS代码,即找到指令对象,执行指令对象的相关方法。 自定义指令生命周期 自定义指令有五...
  • 目录 演示版 您可以在查看Vue-custom-element演示 安装 NPM npm install vue-custom-element --save import vueCustomElement from 'vue-custom-element' ... 注意:命令vue-cli-service build --ta
  • 资深开发者不屑于知道的技巧,但是对于不知道的开发者来说还是非常重要的一个技巧,不卖关子了,接下来分享一个关于VS Code编辑器进行前端开发的时候,新建空白的Vue文件之后,在里面创建自定义模板的方法,这样可以...
  • 快速搭建vue-cli项目步骤解析(Windows)前言一、下载安装Node.js二、使用步骤1.引入库2.读入数据总结 前言 提示:在正式搭建vue脚手架(vue-cli)之前,必须要确保电脑已经安装好了Node.js Node.js官网 提示:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,943
精华内容 7,577
关键字:

自定义vue命令

vue 订阅