vue 怎麼設定 專案ico Vue元件開發與發布

vue.js 作為當下比較熱門的技術，它的核心庫只關注檢視層，容易上手。元件是vue.js最強大的功能之一。元件可以擴充套件html元素，封裝可重用的**。在較高層面上，元件是自定義的元素，vue.js的編譯器為它新增特殊功能。在有些情況下，元件也可以是原生html元素的形式，以js特性擴充套件。

使用 vue-cli 腳手架建立專案 guoxb-ui

vue init webpack guoxb-ui

當然，也可以用vue init webpack-****** guoxb-ui建立簡潔的專案

通過執行上述指令，生成的專案結構如圖所示，大結構基本不用動，只需要新增自己的配置檔案以及自己的資料夾即可。

新增的配置如下（從上至下依次拆分）：

build 目錄下存放著 webpack 的配置資訊，在該目錄下新增了乙個單獨打包外掛程式的配置檔案 webpack.dist.config.js

var path = require('path')

var webpack = require('webpack')
module.exports = ,**
module: ,,,
// other vue-loader options go here}},
,}]},
resolve: ,
extensions: ['*', '.js', '.vue', '.json']
},devserver: ,
performance: ,
devtool: '#eval-source-map'
}if (process.env.node_env === 'production') 
}),new webpack.optimize.uglifyjsplugin(
}),new webpack.loaderoptionsplugin()])}

其中，button 資料夾存放 自定義的button元件 button.vue 以及 用於匯出元件的 index.js；

plugin 目錄下的 index.js 用於新增我們的元件內容，以及註冊元件。

export  from './button.vue';

import gbutton from './button';

import *** from './***';
const install = function(vue, options) 
/* 支援使用標籤的方式引入 */
這是從網上找到的答案，可能並沒有太大說服力，所以又仔細的檢視了vue官方文件
外掛程式通常用來為 vue 新增全域性功能。外掛程式的功能範圍沒有嚴格的限制——一般有下面幾種：

(1) 新增全域性方法或者屬性。如: vue-custom-element
(2) 新增全域性資源：指令/過濾器/過渡等。如 vue-touch
(3) 通過全域性混入來新增一些元件選項。如 vue-router
(4) 新增 vue 例項方法，通過把它們新增到 vue.prototype 上實現。
(5) 乙個庫，提供自己的 api，同時提供上面提到的乙個或多個功能。如 vue-router
不難理解，當我們的元件需要為vue新增全域性功能的時候，是需要在index.js匯出元件之前，來完成這步操作的！

所以，官方文件也給出了為vue新增全域性功能的方法：
myplugin.install = function (vue, options) 

// 2. 新增全域性資源
vue.directive('my-directive', 
...})
// 3. 注入元件選項
vue.mixin(
...})
// 4. 新增例項方法
vue.prototype.$mymethod = function (methodoptions) 
}
這段**是要寫在元件內部的 index.js 裡面的。

在任一頁面引入元件，作測試，例如：
在src - components - helloworld.vue 下引入元件
按鈕

執行專案，測試元件

這裡需要修改 package.json 檔案，如圖所示：
做完以上配置，控制台輸入npm run dist開始打包，打包成功後，會在專案根目錄生成 dist 資料夾，裡面是package.json -> main屬性配置的 guoxb-ui.js 檔案
可以再引入 dist 下的 guoxb-ui.js 檔案測試元件
測試ok了，接下來就是發布元件到 npm，首先得有npm賬號，如果沒有請走註冊。
控制台，專案根目錄下，執行命令：npm login登入 npm，此時會讓輸入使用者名稱、密碼以及郵箱；
登入成功之後，執行命令：npm publish即可。
記住，每次發布，需要修改 package.json 版本號，不然報錯。
發布完之後，就可以轉到我們的 npm官網 上檢視我們的專案。
				
Vue專案路徑別名設定
用vue cli搭建好vue專案之後，進入正式開發過程，有時候會發現各種import路徑中都存在長串的重複路徑，比如 import src assets styles reset.css import src assets styles border.css 為了方便維護，可以開啟build檔案下的...
				
vue專案設定eslint規則校驗
校驗template模板的規範,vue元件 props data等順序一系列推薦風格等 用於校驗js的語法規範，這裡使用airbnb規則 npm i d prettier eslint plugin prettier eslint config prettier prettier prettier ...
				
vue 專案設定移動端rem
第一種直接設定 fnresize window.onresize function function fnresize 禁止雙擊放大 document.documentelement.addeventlistener touchstart function event false var lastt...