vue-cli3.x.x安装

1. 关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

2. vue-cli搭建脚本文件

在终端输入以下命令

vue create vue-test

根据提示进行相应的配置(以手动配置为例):

2.1. 选择 manually select features

2.2. 选择项目需要的一些特性(此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试,暂时不考虑端到端测试(E2E Testing))

提示:按空格键就可以进行选中/取消 操作。选好按回车键

2.3. 选择CSS预处理器语言,此处选择LESS

2.4. 选择ESLint的代码规范,此处使用 Standard代码规范

2.5. 选择何时进行代码检测,此处选择在保存时进行检测

2.6. 选择单元测试解决方案,此处选择 Jest

2.7. 选择 Babel、PostCSS、ESLint等配置文件存放位置,此处选择单独保存在各自的配置文件中

2.8. vue-cli初始化完成后,根据提示,进入到vue-test项目中,并启动项目

// 进入到vue-test项目
cd vue-test
// - 启动服务
npm run serve
// - 打包编译
npm run build
// - 执行lint
npm run lint
// - 执行单元测试
npm run test:unit

3. vue.config.js配置

此部分内容参考Vue-cli配置参考

vue.config.js是一个可选的配置文件,如果项目的(和package.json同级的)根目录中存在这个文件,那么它会被@vue/cli自动加载。你也可以使用package.json中的vue字段,但是注意这种写法需要你严格遵照JSON的格式来写。
module.exports = {
  devServer: {
    port: 8085, // 端口号
    host: "localhost",
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    proxy: {
      "/api": {
        target: "<url>",
        ws: true,
        changeOrigin: true
      },
      "/foo": {
        target: "<other_url>"
      }
    } // 配置多个代理
  }
};

4. vue 插件开发教程

案例1

import devIndxNav from './devIndxNav.vue' // 导入组件
const indxNav = {
  install (Vue, options) {
    Vue.component(devIndxNav.name, devIndxNav) // vuePayKeyboard.name 组件的name属性
    // 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
    // Vue.prototype.$xxx  // 最终可以在任何地方通过 this.$xxx 调用
    // 虽然没有明确规定用$开头  但是大家都默认遵守这个规定
  }
}
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(indxNav)
}
export default indxNav // 导出..

案例2

import testPanel from './panel.vue'
import testToast from './toast.vue'
let test = {}
test.install = function (Vue, options) {
  Vue.prototype.$msg = 'Hello I am test.js'
  Vue.prototype.$myMethod = function (arr) {
    if (arr.length < 0) {
      return false
    } else {
      arr = arr.join('连接你我')
      return arr
    }
  }
  Vue.component(testPanel.name, testPanel) // testPanel.name 组件的name属性
  Vue.component(testToast.name, testToast) // testPanel.name 组件的name属性
}
export default test
<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <test-panel ref="panel"></test-panel>
    <test-toast ref="toast"></test-toast>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    // HelloWorld
  },
  created () {
    console.log(this.$myMethod([1, 2, 6]))
  }
}
</script>

实例化


import ProcessDesign from './components/Container.vue' import GenerateProcess from './components/GenerateProcess.vue' ProcessDesign.install = function (Vue) { Vue.component(ProcessDesign.name, ProcessDesign) } GenerateProcess.install = function (Vue) { Vue.component(GenerateProcess.name, GenerateProcess) } const components = [ ProcessDesign, GenerateProcess ] const install = function (Vue, opts = {}) { components.forEach(component => { Vue.component(component.name, component) }) } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export { install, ProcessDesign, GenerateProcess } export default { install, ProcessDesign, GenerateProcess } //安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。

NPM打包

package.json

{
  "name": "g6-editor-erp",
  "description": "基于Vue,iview,G6开发的一款流程设计器,提高流程开发效率的利器,让开发者从枯燥的流程代码编写中解放出来",
  "version": "0.1.0",
  "author": "+c",
  "license": "MIT",
  "keywords": [
    "component",
    "vue",
    "form",
    "iview",
    "auto"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/liujiacai0518"
  },
  "main": "dist/ProcessDesign.common.js",
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "build-bundle": "vue-cli-service build --target lib --name ProcessDesign ./src/index.js"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.5",
    "@vue/cli-plugin-unit-jest": "^3.1.1",
    "@vue/cli-service": "^3.1.4",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.17"
  }
}

main参数

main属性指定了程序的主入口文件。意思是,如果你的模块被命名为foo,用户安装了这个模块并通过require(“foo”)来使用这个模块,那么require返回的内容就是main属性指定的文件中 module.exports指向的对象。
它应该指向模块根目录下的一个文件。对大对数模块而言,这个属性更多的是让模块有一个主入口文件,然而很多模块并不写这个属性。

vue-cli-service build

用法:vue-cli-service build [options] [entry|pattern]

选项:

  --mode        指定环境模式 (默认值:production)
  --dest        指定输出目录 (默认值:dist)
  --modern      面向现代浏览器不带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值:app)
  --name        库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包,带有 JS/CSS/HTML 的压缩,和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。

这里还有一些有用的命令参数:

–modern 使用现代模式构建应用,为现代浏览器交付原生支持的 ES2015 代码,并生成一个兼容老浏览器的包用来自动回退。

–target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。

–report 和 –report-json 会根据构建统计生成报告,它会帮助你分析包中包含的模块们的大小。