❶ Vue組件庫發布到npm詳解
製作了一套自己的組件庫，並發布到npm上，項目代碼見https://github.com/hamger/hg-vcomponents
前期准備
有一個npm賬號
安裝了vue-cli
搭建項目
vue
init
webpack
hg-vcomponents
cd
hg-vcomponents
cnpm
install
目錄結構
-
vue-flag-list
+
build
+
dist
//
存放發布到npm的代碼
-
src
-
components
//
存放組件源代碼
和
README.md
-
arrows
arrows.vue
README.md
-
round
round.vue
README.md
index.js
//
組件導出文件
-
examples
//
存放組件的
demo
arrows.vue
round.vue
index.vue
//
組件
demo
的入口
-
router
index.js
//
引入
examples
下的組件，並配置路由
App.vue
main.js
...
內部代碼詳見
GitHub，如果對你有所幫助，給個star吧
。
項目配置
為了使項目能上傳到npm上，需要配置一些地方。
build/webpack.base.conf.js
entry:
{
app:
process.env.NODE_ENV
===
'proction'
?
'./src/components/index.js'
//
生產模式下導入文件
:
'./src/main.js'
//
開發模式下導入文件
},
package.json
"private":
false,
//
因為組件包是公用的，所以
private
為
false
"main":
"dist/hg-vcomponents.min.js",
//
導出文件名，即
import
引入的文件
.gitignore
dist文件夾下文件是要導出的文件，所以在.gitignore文件中把dist/去掉，這樣上傳代碼的時候也會更新打包後的文件。
開發與生產
由於配置了webpack.base.conf.js，使得項目的開發與生產獨立開來。
使用npm
run
dev進入開發環境，就可以看到組件的demo，方便調試。使用npm
run
build打包組件庫。
發布到npm
在你登錄了npm的情況下，在根目錄輸入命令行(每次更新代碼執行同樣操作)
npm
version
patch
npm
publish
大功告成！現在你可以在其他地方使用npm
install
hg-vconponents下載自己寫的組件庫了。
您可能感興趣的文章:使用命令行工具npm新創建一個vue項目的方法vue組件發布到npm簡單步驟用vue封裝插件並發布到npm的方法步驟vue封裝第三方插件並發布到npm的方法基於Vue的文字跑馬燈組件(npm
組件包)通過npm引用的vue組件使用詳解
❷ vue前端如何實現文件文件夾系統
文件上傳頁面的前端可以選擇使用一些比較好用的上傳組件，例如網路的開源組件WebUploader，澤優軟體的up6，這些組件基本能滿足文件上傳的一些日常所需功能，如非同步上傳文件，文件夾，拖拽式上傳，黏貼上傳，上傳進度監控，文件縮略圖，甚至是大文件斷點續傳，大文件秒傳。
需求：
支持大文件批量上傳（20G）和下載，同時需要保證上傳期間用戶電腦不出現卡死等體驗；
內網百兆網路上傳速度為12MB/S
伺服器內存佔用低
支持文件夾上傳，文件夾中的文件數量達到1萬個以上，且包含層級結構。
支持PC端全平台操作系統，Windows,Linux,Mac
支持文件和文件夾的批量下載，斷點續傳。刷新頁面後繼續傳輸。關閉瀏覽器後保留進度信息。
支持文件夾批量上傳下載，伺服器端保留文件夾層級結構，伺服器端文件夾層級結構與本地相同。
❸ 如何用 Vue 實現前端
前端許可權控制並不是新生事物，早在後端 MVC 時代，web 系統中就已經普遍存在對按鈕和菜單的顯示 / 隱藏控制，只不過當時它們是由後端程序員在 jsp 或者 php 模板中實現的。
隨著前後端分離架構的流行，前後端以介面為界實現開發解耦，許可權控制也一分為二，前端許可權控制的所有權才真正回到了前端。
可能有的同學會想，前後端分別做一套控制，是不是將事情復雜化了，而且從根本上講前端沒有秘密，後端才是許可權的關鍵，那是不是只在後端做控制就可以了。
❹ Vue在前端開發中需要注意什麼
基於Vue官方風格指南整理
一、強制
1. 組件名為多個單詞
組件名應該始終是多個單詞的，根組件 App 除外。
正例：
export default {
name: 'TodoItem',
// ...
}
反例：
export default {
name: 'Todo',
// ...
}
2. 組件數據
組件的 data 必須是一個函數。
當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數。
正例：
// In a .vue file
export default {
data () {
return {
foo: 'bar'
}
}
}
// 在一個 Vue 的根實例上直接使用對象是可以的，
// 因為只存在一個這樣的實例。
new Vue({
data: {
foo: 'bar'
}
})
反例：
export default {
data: {
foo: 'bar'
}
}
3. Prop定義
Prop 定義應該盡量詳細。
在你提交的代碼中，prop 的定義應該盡量詳細，至少需要指定其類型。
正例：
props: {
status: String
}
// 更好的做法！
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
反例：
// 這樣做只有開發原型系統時可以接受
props: ['status']
4. 為v-for設置鍵值
總是用 key 配合 v-for。
在組件上_總是_必須用 key 配合 v-for，以便維護內部組件及其子樹的狀態。甚至在元素上維護可預測的行為，比如動畫中的對象固化 (object constancy)，也是一種好的做法。
正例：
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
反例：
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
5.避免 v-if 和 v-for 用在一起
永遠不要把 v-if 和 v-for 同時用在同一個元素上。
一般我們在兩種常見的情況下會傾向於這樣做：
為了過濾一個列表中的項目 (比如 v-for="user in users" v-if="user.isActive")。在這種情形下，請將 users 替換為一個計算屬性 (比如 activeUsers)，讓其返回過濾後的列表。
為了避免渲染本應該被隱藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將 v-if 移動至容器元素上 (比如 ul, ol)。
正例：
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
反例：
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
6. 為組件樣式設置作用域
對於應用來說，頂級 App 組件和布局組件中的樣式可以是全局的，但是其它所有組件都應該是有作用域的。
這條規則只和單文件組件有關。你不一定要使用 scoped 特性。設置作用域也可以通過 CSS Moles，那是一個基於 class 的類似 BEM 的策略，當然你也可以使用其它的庫或約定。
不管怎樣，對於組件庫，我們應該更傾向於選用基於 class 的策略而不是 scoped 特性。
這讓覆寫內部樣式更容易：使用了常人可理解的 class 名稱且沒有太高的選擇器優先順序，而且不太會導致沖突。
正例：
<template>
<button class="c-Button c-Button--close">X</button>
</template>
<!-- 使用 BEM 約定 -->
<style>
.c-Button {
border: none;
border-radius: 2px;
}
.c-Button--close {
background-color: red;
}
</style>
反例：
<template>
<button class="btn btn-close">X</button>
</template>
<style>
.btn-close {
background-color: red;
}
</style>
<template>
<button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
border: none;
border-radius: 2px;
}
.button-close {
background-color: red;
}
</style>
二、強烈推薦（增強可讀性）
1. 組件文件
只要有能夠拼接文件的構建系統，就把每個組件單獨分成文件。
當你需要編輯一個組件或查閱一個組件的用法時，可以更快速的找到它。
正例：
components/
|- TodoList.vue
|- TodoItem.vue
反例：
V
ue.component('TodoList', {
// ...
})
Vue.component('TodoItem', {
// ...
})
2. 單文件組件文件的大小寫
單文件組件的文件名應該要麼始終是單詞大寫開頭 (PascalCase)
正例：
components/
|- MyComponent.vue
反例：
components/
|- myComponent.vue
|- mycomponent.vue
3. 基礎組件名
應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭，比如 Base、App 或 V。
正例：
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
反例：
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
4. 單例組件名
只應該擁有單個活躍實例的組件應該以 The 前綴命名，以示其唯一性。
這不意味著組件只可用於一個單頁面，而是每個頁面只使用一次。這些組件永遠不接受任何 prop，因為它們是為你的應用定製的，而不是它們在你的應用中的上下文。如果你發現有必要添加 prop，那就表明這實際上是一個可復用的組件，只是目前在每個頁面里只使用一次。
正例：
components/
|- TheHeading.vue
|- TheSidebar.vue
反例：
components/
|- Heading.vue
|- MySidebar.vue
5. 緊密耦合的組件名
和父組件緊密耦合的子組件應該以父組件名作為前綴命名。
如果一個組件只在某個父組件的場景下有意義，這層關系應該體現在其名字上。因為編輯器通常會按字母順序組織文件，所以這樣做可以把相關聯的文件排在一起。
正例：
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
反例：
components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue
6. 組件名中的單詞順序
組件名應該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾。
正例：
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- .vue
反例：
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
7. 模板中的組件名大小寫
總是 PascalCase 的
正例：
<!-- 在單文件組件和字元串模板中 -->
<MyComponent/>
反例：
<!-- 在單文件組件和字元串模板中 -->
<mycomponent/>
<!-- 在單文件組件和字元串模板中 -->
<myComponent/>
8. 完整單詞的組件名
組件名應該傾向於完整單詞而不是縮寫。
正例：
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
反例：
components/
|- SdSettings.vue
|- UProfOpts.vue
9. 多個特性的元素
多個特性的元素應該分多行撰寫，每個特性一行。
正例：
<img
src="htorg/images/logo.png"
alt="Vue Logo"
>
<MyComponent
foo="a"
bar="b"
baz="c"
/>
反例：
<img src="h/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>
10. 模板中簡單的表達式
組件模板應該只包含簡單的表達式，復雜的表達式則應該重構為計算屬性或方法。
復雜表達式會讓你的模板變得不那麼聲明式。我們應該盡量描述應該出現的是什麼，而非如何計算那個值。而且計算屬性和方法使得代碼可以重用。
❺ 前端中的Vue是什麼
Vue.js 是一個JavaScriptMVVM庫，是一套構建用戶界面的漸進式框架。它是以數據驅動和組件化的思想構建的，採用自底向上增量開發的設計。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js；同時比起 React + Rex 相對復雜的架構，Vue.js 更加輕量級也更加容易上手，是初創項目的首選前端框架。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。
Vue.js是一個構建數據驅動的 web 界面的漸進式框架，是一個JavaScript MVVM庫。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動採用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。
為什麼？
1、文檔好
2、簡單
3、更新快
4、開發效率高
5、能大能小 能上能下
6、開始學習成本低
7、支持組件化，也就是可以將頁面封裝成若干個組件，採用積木式進行編程
以上回答希望對你有所幫助
❻ 學習前端vue怎麼樣還好嗎
給你一些學習Vue的技巧
1、狀態分享
隨著組件的細化，你會遇到多組件狀態共享的情況，Vue可以解決這類問題，但如果應用不夠大，為避免代碼繁瑣冗餘，最好不要使用它。今天我們介紹的是 vue.js 2.6新增加的 Observable API，通過使用這個api我們可以應對一些簡單的跨組件數據狀態共享的情況。
首先我們將在組件外創建一個store，然後在App.vue組件裡面使用 store.js 提供的store和mutation方法，同理其它組件也可以這樣使用，從而實現多個組件共享數據狀態。
2、去除多餘的樣式
隨著項目越來越大，書寫的不注意，不自然的就會產生一些多餘的CSS。一旦項目大了以後，多餘的CSS會越來越多，導致包越來越大，從而影響項目運行性能，所以有必要在正式環境去除掉這些多餘的CSS。你可以藉助purgecss，它支持 CLI、JavascriptApi、Webpack 等多種方式使用，通過這個庫，我們可以很容易的去除掉多餘的CSS。
3、長列表性能優化
Vue會通過object.defineProperty對數據進行劫持，來實現視圖響應數據的變化，然而有些時候我們的組件就是純粹的數據展示，不會有任何改變，我們就不需要 Vue來劫持我們的數據。
❼ 如何通過 Vue+Webpack 來做通用的前端組件化架構設計
angular:
我覺得angularjs的學習上手周期比較長，可能遇到問題，都無法立刻解決，而且編碼的質量明顯的很差，如果團隊沒有制定規范，那寫出來的代碼就沒法看。對於一個選用angularjs的團隊來說，我認為編碼規范是很重要的，否則對編碼能力是沒有提升的。
avalon:
avalonjs文檔資料沒有那麼全，我感覺一些開源支持的力量不夠多。不過，如果有項目需求，需要去做IE瀏覽器的支持話，我建議選擇avalonjs
vue：
vuejs 文檔比較齊全，vue吸取了angularjs
的一些優點，規避了一些缺點，至少編碼規范上有了一個質的飛躍，學習上手的周期比較短。vue起初只是一個輕量級的類庫，用來做類似於react的事情，
同時vue也是可以拿來做前端架構設計的，比如：vueify + vue-router （spa框架）。
vue學習地址：http://cn.vuejs.org/
以上說了那麼多沒用的，下面就來點幹活了！
我的前端組件化架構設計，目錄如下：
項目架構用到的知識點，還是挺多的，知識清單如下：
［1］： gulp + webpack 構建打包工具， 使用了一系列的loader，比如：vue-loader, sass-loader, babel-loader , 以及 postcss，postcss-custom-properties，等等
[2] : postcss-custom-properties : 用來做樣式全局化， 只需要通過變數去維護，通過編譯變數既可以換膚。
[3] : vue-loader （vue文件組件化）：用來去編譯處理 *.vue 的文件，一個vue 文件就是一個單獨的組件，vue組件開發具有高獨立且易維護。組件的劃分可大可小，一個頁面也可以看作成由多個vue 組件構成的，一個頁面也可以是一個vue組件， vue 文件結構如下：
[4] ： babel-loader ：實現對vue文件中 es6 語法的編譯解析
[5] ： vue-router ：用來做路由分發，而且文檔非常的齊全（學習地址：http://vuejs.github.io/vue-router/zh-cn/index.html）。
[6] ： vue （插件式方式）：vue本身提供了一個install 方式用來注入，我們可以注入一些全局的（屬性、方法、以及通用的ui組件）。
下面說說文件夾的含義：
common 文件夾： 是用來存一些通用的東西，比如樣式，以及全局的js等等
components 文件夾：用來放獨立的組件，我打算後期做細分，ui 組件，以及page 組件等等，這裡面就是團隊的心血，以後就能做成獨立的組件庫了。
filters 文件夾：用來放通用的過濾器操作。
plugins 文件夾：用來放 Vue.use 注入到Vue全局的插件庫，比如：請求載入、彈框、分頁、ui組件 等等。plugins 只是把 componets 組件暴露給 Vue全局。
views 文件夾： 用來存放頁面模塊
app.vue 文件：第一次啟動的主程序模塊
app.js 文件：啟動前的載入，注入，實例化
router.config.js 文件：路由模塊
目前該架構在前後台的SPA架構都適用，可能還是有很多不完善，不過我還很年輕，vue也還狠年輕，望各位道友多給我們年輕人一些機會。
❽ 用vue生成svg，保存和修改
前端本身不具備操作本地文件的能力。只有配合後端才能做到。就是說需要將你的SVG通過AJAX傳給後端，後端將你的文件保存到伺服器目錄下。後端也可以把文件傳到前端，交由前端進行編輯。但是文件保存只有後端才能操作
❾ yii2里 前端用vue寫 路徑怎麼配置
前後端分離之後,後台語言的選擇一下子多了,只要能處理請求,返回JSON就可以了。
不過據說PHP是世界上最好的語言，所以本教程選的是PHP，當然，站在巨人的肩膀上，選個好用不浮誇的框架也是必要的，不然重復發明輪子會佔用很多玩耍的時間，不利於身心健康。
❿ 前端 vue 已登陸用戶怎麼處理
可以嘗試用vuex做狀態管理，當用戶登錄成功之後，將狀態信息存放在相應的本地（如果是web端可以定義一個cookie，設置一下過期時間，如果是移動端，可以嘗試放在localstorage）。登錄之前做阻塞，去做這個狀態信息的檢測，通過就登錄。沒通過就路由到登錄界面