vuecli2建立的元件庫工程實現按需引入

目前最新的vuecli版本是3，而vuecli3與vuecli2都使用了相同的命令vue，所以vuecli2被覆蓋了，如果要使用vuecli2的init命令建立工程，需要安裝乙個橋接工具：@vue/cli-init

工程位址

npm install -g @vue/cli-init

# `vue init` 的執行效果將會跟 `[email protected]` 相同
vue init webpack my-project

vue init webpack demo-vuecli2-ui

開啟專案，執行npm install安裝依賴

安裝完之後，npm run dev啟動，檢查是否正常。

一切正常

這裡元件庫的名字為：demo-vuecli2-ui，現在開始寫元件，這裡只寫兩個元件：

安裝element-ui

npm i element-ui -d編寫元件，根目錄下建立components資料夾，目錄結構：- components

- button
- index.js
- pl-button.vue
- ele
- index.js
- input
- index.js
- pl-input.vue
- index.js

/*components/button/index.js*/

import button from
'./pl-button'
button.
install
=(vue)
=> vue.
component
(button.name, button)
;export
default button

/*components/button/pl-button.vue*/

="pl-button"
>
pl-button
<
/div>
<
/template>
export
default
<
/script>

vue cli2 建立專案

安裝node 可選用node 10版本，相容vue cli2，vue cli3 node v 檢視node版本 node10.22.1 npm v 檢視npm版本 npm 6.14.6 vue cli2文件 cnpm install g vue cli vue init webpack 資料夾名 w...

同時安裝Vue CLI2和Vue CLI3的方法

如果你想體驗vue cli3的簡潔清爽，又偶爾需要使用vue cli2，那這篇帖子就是你需要的。配置方法改進於 同一臺電腦 實現 vue cli2和vue cli3同時並存 原方法使用了直接修改檔名的方式，不夠美觀，破壞式的，改進後為透傳呼叫。修改 2019 08 14 原方法使用了直接修改檔名的方...

建立乙個前端的工具庫 建立npm工程

要建乙個工程，首先得明白這個工程的作用。因為現在公司還有部分工程是老工程，所以，這次規劃除了針對新工程，還需要能夠將js打包成壓縮檔案提供給老工程使用標籤引入。打包工具選擇webpack，單元測試整合了karma jasmine。好了，現在就開始搭建吧！npm標準工程當環境都配置好了之後我們就可以使...