基於vue cli建立一個vue專案
首先安裝最新的vue cli腳手架，
npm install --global @vue/cli
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @vue/cli@4.4.6
added 1230 packages from 670 contributors in 118.122s
檢視安裝的vue -V
@vue/cli 4.4.6
建立專案：vue create my-project-name（“my-project-name”，這個可以根據需要命名，儘量用英文）
Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: ts_tmpl
建立完成之後，會出現如下提示
⚓ Running completion hooks...
� Generating README.md...
� Successfully created project my-project-name.
� Get started with the following commands:
$ cd my-project-name
$ npm run serve
根據提示執行命令
E:\vue_codes>cd my-project-name
E:\vue_codes\my-project-name>npm run serve
> my-project-name@0.1.0 serve E:\vue_codes\my-project-name
> vue-cli-service serve
INFO Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin
DONE Compiled successfully in 5304ms 上午11:13:54
No type errors found
Version: typescript 3.9.7
Time: 3160ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.95:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
在瀏覽器輸入地址：http://localhost:8080/
出現如上圖所示介面，表示專案建立成功了。
生成的程式碼目錄結構如下：
兩個宣告檔案：shims-vue.d.ts和shims.tsx.d.ts
shims-vue.d.ts：由於 TypeScript 預設並不支援 *.vue 字尾的檔案，所以在 vue 專案中引入的時候需要建立一個shims-vue.d.ts 檔案，放在專案專案對應使用目錄下，例如 src/shims-vue.d.ts，用來支援*.vue 字尾的檔案
shims-tsx.d.ts：允許.tsx 結尾的檔案，在 Vue 專案中編寫 jsx 程式碼
tsconfig.json：typescript配置檔案,主要用於指定待編譯的檔案和定義編譯選項
normalize.css：Normalize.css 是一個可以定製的CSS檔案，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一。Normalize.css是一種CSS reset的替代方案。
.browserslistrc：這個配置能夠分享目標瀏覽器和nodejs版本在不同的前端工具。這些工具能根據目標瀏覽器自動來進行配置，Browserslist這個東西單獨是沒用的，（補充: 在vue官方腳手架中，browserslist欄位會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉譯的 JavaScript 特性和需要新增的 CSS 瀏覽器字首。）
browserslist的配置檔案：
> 1% 相容全球使用率大於1%的遊覽器
last 2 versions 相容每個遊覽器的最近兩個版本
not ie <= 8 不相容ie8及以下
具體可見 browserslist。
babel.config.js：Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的程式碼轉換為向後相容的 JavaScript 語法，以便能夠執行在當前和舊版本的瀏覽器或其他環境中。
postcss.config.js：用於配置將px轉化成rem，和自動新增CSS瀏覽器字首等。 esnext 是一個 JavaScript 庫，可以將 ES6 草案規範語法轉成今天的 JavaScript 語法。
改造專案結構
這種元件專案和我們日常的專案還是有很大區別的，由於前面我採用的是vue cli建立的完整模板專案，這裡許多東西用不到，我們就將其刪掉，最終專案目錄結構如下：
examples：是元件使用示例
src/components：是元件原始碼
package.json程式碼如下：
{
"name": "jie-echarts",
"version": "0.1.0",
"private": false,
"description": "echarts元件",
"main": "dist/JieEcharts.common.js",
"author": "zouqj<zouyujie@126.com>",
"license": "MIT",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name JieEcharts ./src/index.ts"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zouyujie/vue-components/tree/master/jie-echarts"
},
"bugs": {
"url": "https://github.com/zouyujie/vue-components/issues"
},
"homepage": "https://github.com/zouyujie/vue-components/tree/master/jie-echarts",
"keywords": [
"vue",
"vuejs",
"typescript",
"vuecli4.x"
],
"type": "git",
"url": "git+https://github.com/zouyujie/vue-components/tree/master/jie-echarts"
},
"bugs": {
"url": "https://github.com/zouyujie/vue-components/issues"
},
"homepage": "https://github.com/zouyujie/vue-components/tree/master/jie-echarts",
"keywords": [
"vue",
"vuejs",
"typescript",
"vuecli4.x"
],
"dependencies": {
"core-js": "^3.6.5",
"echarts": "^4.8.0",
"ts-loader": "^8.0.1",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@types/echarts": "^4.6.4",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-plugin-router": "~4.4.0",
"@vue/cli-plugin-typescript": "~4.4.0",
"@vue/cli-plugin-vuex": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.12.0",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3",
"vue-template-compiler": "^2.6.11"
}
}
重點注意標紅部分的配置。
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"typeRoots": ["/@types", "./node_modules/@types"],
"types": ["webpack-env"],
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": ["node_modules"]
}
vue.config.js程式碼如下：
'use strict';
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
// 修改 src 目錄 為 examples 目錄
pages: {
index: {
entry: 'examples/main.ts',
template: 'public/index.html',
filename: 'index.html',
},
},
// vue 通過 file-loader 用版本雜湊值和正確的公共基礎路徑來決定最終的圖片路徑，再用 url-loader 將小於 4kb 的
// 圖片內聯，以減少 HTTP 請求的數量。所以我們可以通過 chainWebpack 調整圖片的大小限制。例如，我們將
// 圖片大小限制設定為 13kb，低於13kb的圖片全部被內聯，高於13kb的圖片會放在單獨的img資料夾中。
chainWebpack: (config) => {
const imagesRule = config.module.rule('images');
imagesRule
.use('url-loader')
.loader('url-loader')
.tap((options) => Object.assign(options, { limit: 13312 }));
},
// 設定css: { extract: false },可以強制內聯，就不會將css單獨打包成一個檔案，導致頁面沒有style
css: { extract: false },
productionSourceMap: false,
};
說明：UglifyJS Webpack Plugin外掛用來縮小（壓縮優化）js檔案，修改應用入口檔案，examples/main.ts，方便執行npm run serve的時候，可以直接檢視元件的示例。
.npmignore可以將一些不需要釋出到npm的檔案忽略掉，.npmignore配置如下：
.*
package-lock.json
/.git/
/.vscode/
tslint.json
tsconfig.json
*.log
.DS_Store
/dist
/examples
/node_modules
/public
/src
/tests
.browserslistrc
jest.config.js
vue.config.js
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
.gitignore
.npmignore
.npmrc
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
components下面
index.ts程式碼，以外掛的形式進行封裝，方便全域性引用：
import jieEcharts from './jie-echarts.vue';
(jieEcharts as any).install = (Vue: any) => {
Vue.component(jieEcharts.name, jieEcharts);
};
export default jieEcharts;
jie-echarts.vue，是元件原始碼，程式碼：
<template>
<!-- 每一個圖表都有自己唯一的id,需要動態傳入。 -->
<div :ref="id" :id="id" :class="myclass" :style="style" />
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import Echarts from "echarts";
@Component({
name: "jie-echarts"
})
export default class extends Vue {
@Prop({ default: "myCharts" }) private id!: string;
@Prop({ default: "100%" }) private width!: string;
@Prop({ default: "200px" }) private height!: string;
@Prop({ default: "echarts-line" }) private myclass!: string;
@Prop() private options!: object;
@Prop({ default: false }) private loading!: boolean;
private MyEcharts: any = null; // echarts例項
created() {
console.log("this.options :>> ", this.options);
}
mounted() {
this.InitCharts();
}
get style() {
return {
height: this.height,
width: this.width
};
}
@Watch("options", { deep: true })
onChangeOption(newVal: string, oldVal: string) {
if (this.MyEcharts) {
if (newVal) {
// console.log(JSON.stringify(newVal))
this.MyEcharts.setOption(newVal, true);
} else {
this.MyEcharts.setOption(oldVal, true);
}
setTimeout(() => {
this.MyEcharts.resize();
});
} else {
this.InitCharts();
}
}
@Watch("height")
onChangeHeight(val: string) {
if (val) {
this.height = val;
}
if (this.MyEcharts) {
this.MyEcharts.setOption(this.options, true);
} else {
this.InitCharts();
}
}
@Watch("loading")
onChangeLoading(val: boolean) {
if (val == true) {
this.showLoading();
}
if (val == false) {
this.hideLoading();
}
}
//-----------------------method----------------------
// 元件初始化
private InitCharts() {
const dom: any = this.$refs[this.id] as HTMLDivElement; // document.getElementById(this.id);
this.MyEcharts = Echarts.init(dom);
if (this.loading == true) {
this.showLoading();
}
/**
* 此方法適用於所有專案的圖表，但是每個配置都需要在父元件傳進來，相當於每個圖表的配置都需要寫一遍，不是特別的省程式碼，主要是靈活度高
* echarts的配置項，你可以直接在外邊配置好，直接扔進來一個this.option
*/
this.MyEcharts.clear(); // 適用於大資料量的切換時圖表繪製錯誤,先清空在重繪
this.MyEcharts.setOption(this.options, true); // 設定為true可以是圖表切換資料時重新渲染
setTimeout(() => {
this.MyEcharts.resize();
});
// 當視窗變化時隨瀏覽器大小而改變
window.addEventListener("resize", () => {
this.MyEcharts.resize();
});
this.MyEcharts.on("click", (params: any) => {
this.mapClick(params);
});
}
//元件單擊事件
private mapClick(params: any) {
// console.log(params, 999999);
const data = {
color: params.color,
data: params.data,
dataIndex: params.dataIndex,
seriesIndex: params.seriesIndex,
chartType: params.componentSubType
};
this.$parent.$emit("chartParams", JSON.stringify(data));
if (params.seriesType == "map") {
this.$emit("mapValue", params.name);
}
this.$emit("eclick", params);
}
private showLoading() {
if (this.MyEcharts) {
this.MyEcharts.showLoading({
text: "loading"
// color: '#4cbbff',
// textColor: '#4cbbff',
});
}
}
private hideLoading() {
if (this.MyEcharts) {
this.MyEcharts.hideLoading();
}
}
}
</script>
<style lang="scss" scoped>
.echarts-line {
height: 100%;
}
</style>
@types目錄下：
component.d.ts程式碼：
import Vue from 'vue';
export class VanComponent {
static name: string;
static install(vue: typeof Vue): void;
}
說明：@types是npm的一個分支，當我們把npm包發上去，npm包就會託管到伺服器，供大家下載，但是ts為了程式碼的可複用性，要申明一些靜態型別檔案，那些檔案就是*.d.ts
shims-vue.d.ts程式碼：
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
App.vue程式碼：
<template>
<div id="app">
<jie-echarts :options="echartsOptions"></jie-echarts>
<!-- <router-view /> -->
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import jieEcharts from "../src/index";
@Component({
components: {
jieEcharts
}
})
export default class TestJieEchartsPreview extends Vue {
protected echartsOptions = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line"
}
]
};
}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
執行npm run serve，執行結果如下：
釋出到NPM
1.去https://www.npmjs.com/註冊一個賬號
2.登入郵箱，點選啟用連線
3.執行npm login，進行登入
PS E:\vue_codes\my-project-name> npm login
Username: zouyujie
Password:
Email: (this IS public) zouyujie@126.com
如果你是使用的淘寶映象，注意啊要先切換到npm官網映象，切換方式：npm config set registry https://registry.npmjs.org/
4.執行命令 npm publish，進行釋出，如果出現如下圖所示錯誤：
說明郵箱沒有繫結成功，點選https://www.npmjs.com/email-edit，進行繫結，然後重新執行npm publish，執行結果如下：
PS E:\vue_codes\my-project-name> npm publish
npm notice
npm notice package: jie-echarts@0.1.0
npm notice === Tarball Contents ===
npm notice 632B dist/index.html
npm notice 4.3kB dist/favicon.ico
npm notice 66B babel.config.js
npm notice 965.0kB dist/js/chunk-vendors.80f39f1d.js
npm notice 6.3kB dist/js/index.f9222971.js
npm notice 1.4kB package.json
npm notice 327B README.md
npm notice === Tarball Details ===
npm notice name: jie-echarts
npm notice version: 0.1.0
npm notice package size: 341.3 kB
npm notice unpacked size: 978.0 kB
npm notice shasum: 2b65bfa887ba4677dc95a36a4b0403ebfecc9fde
npm notice integrity: sha512-RwSE3lC8N3wZT[...]b1b9cvJ8UtL/w==
npm notice total files: 7
npm notice
+ jie-echarts@0.1.0
至此，npm釋出成功。
然後我們去npm上，檢視我們釋出的npm包，
如果能看到如下圖所示介面：
說明已釋出成功。
注意：每次重新發布都要記得修改一下版本號，否則會發布失敗。
npm上地址：https://www.npmjs.com/package/jie-echarts
安裝jie-echarts
npm i jie-echarts