ZNZD平台vue项目
一、安裝配置node.js
1.1 配置企業級軟件倉庫
1）首先用的是Nexus Repository Manager搭建npm私服；（待補充）
2）項目使用修改.npmrc文件來修改源
現在需要做的就是修改源！采取配置npmrc文件的方式：
.npmrc文件
(1)除了使用cli的npm config命令來顯示修改npm配置,還可以通過npmrc文件直接修改配置
(2)npmrc文件路徑
npm config ls -l 命令查看配置 存在npmrc文件就會打印出文件路徑,沒有的話就使用命令配置registry,npmrc文件就會出現
此方式為全局有效，但沒有修改原始的配置項。
需要在用戶目錄下創建 .npmrc 文件，添加如下內容：
3）使用設置 npm 的配置項的方式
npm cli 提供了npm config 命令進行npm相關配置, 通過npm config ls -l可查看npm的所有配置,包括默認配置.
常用配置:
proxy, https-proxy :指定npm使用代理
registry 指定npm下載安裝包的源 默認:https://registry.npmjs.org/
此方式為設置全局的 npm 配置項，即使關閉終端或重啟電腦都不會失效。
npm config set registry https://registry.npm.taobao.org4）終端安裝
此方式為一次性使用，每次安裝(或查看)都要帶上 --registry 選項
npm install PACKAGE_NAME --registry https://registry.npm.taobao.org npm info PACKAGE_NAME --registry https://registry.npm.taobao.org二、 Node環境從6.10.3升級到8.9.4后報錯
Node Sass could not find a binding for your current environment.
npm rebuild node-sass然后就ok了。
三、再談.native
native - 監聽組件根元素的原生事件。
主要是給自定義的組件添加原生事件。
給普通的標簽加事件，然后加native是無效的,onclick事件不會觸發！
用第三方組件或者UI框架會自帶自身封裝的事件，如keyup等，會覆蓋原生的組件而無法起效果。這時需要使用.native（常用的：使用elementUI）
四、CSS改變input光標顏色
谷歌瀏覽器的默認光標顏色是黑色的，可以使用caret-color來改變光標顏色：
input{caret-color:red; }五、css3
5.1屬性前綴（-moz、-ms、-webkit、-o-）
1、-moz-代表firefox瀏覽器私有屬性
2、-ms-代表ie瀏覽器私有屬性
3、-webkit-代表safari、chrome私有屬性
4、-o-代表Opera
5.2 first-of-type選擇器
:first-of-type 匹配的是某父元素下相同類型子元素中的第一個，比如 p:first-of-type，就是指所有類型為p的子元素中的第一個。這里不再限制是第一個子元素了(:first-child)，只要是該類型元素的第一個就行了。
同樣類型的選擇器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以這樣去理解。
六、import什么時候要加{ }
ES6中export及export default的區別
在JavaScript ES6中，export與export default均可用于導出常量、函數、文件、模塊等，你可以在其它文件或模塊中通過import+(常量 | 函數 | 文件 | 模塊)名的方式，將其導入，以便能夠對其進行使用，但在一個文件或模塊中，export、import可以有多個，export default僅有一個。
1.export與export default均可用于導出常量、函數、文件、模塊等
2.在一個文件或模塊中，export 、import可以有多個，export default僅有一個
3.通過export方式導出，在導入時要加{ }，export default則不需要
4.export能直接導出變量表達式，export default不行
ES6模塊主要有兩個功能：export和import
6.1 定義：
export用于對外輸出本模塊（一個文件可以理解為一個模塊）變量的接口；
import用于在一個模塊中加載另一個含有export接口的模塊。
也就是說使用export命令定義了模塊的對外接口以后，其他JS文件就可以通過import命令加載這個模塊（文件）。
6.2 export default
b.js使用import命令的時候，用戶需要知道a.js所暴露出的變量標識符，否則無法加載。可以使用export default命令，為模塊指定默認輸出，這樣就不需要知道所要加載模塊的變量名。
a.js
var sex="boy"; export default sex（sex不能加大括號）原本直接export sex外部是無法識別的，加上default就可以了.
b.js
import any from "./a.js" import any12 from "./a.js" console.log(any,any12) // boy,boy6.3 動態加載
在router/index.js中，不是像電商后臺項目一樣，在一開始就import所有的組件，而是創建路由時，按需加載：
電商項目：
ZNZD項目：
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),hidden: true} ]6.3.1 什么是import()
import命令會被 JavaScript 引擎靜態分析，先于模塊內的其他模塊執行（叫做”連接“更合適）。所以，下面的代碼會報錯。
// 報錯 if (x === 2) { import MyModual from './myModual'; }上面代碼中，引擎處理import語句是在編譯時，這時不會去分析或執行if語句，所以import語句放在if代碼塊之中毫無意義，因此會報句法錯誤，而不是執行時錯誤。也就是說，import和export命令只能在模塊的頂層，不能在代碼塊之中（比如，在if代碼塊之中，或在函數之中）。
這樣的設計，固然有利于編譯器提高效率，但也導致無法在運行時加載模塊。在語法上，條件加載就不可能實現。如果import命令要取代 Node 的require方法，這就形成了一個障礙。因為require是運行時加載模塊，import命令無法取代require的動態加載功能。
const path = './' + fileName; const myModual = require(path);上面的語句就是動態加載，require到底加載哪一個模塊，只有運行時才知道。import語句做不到這一點。
因此，建議引入import()函數，完成動態加載。
import命令能夠接受什么參數，import()函數就能接受什么參數，兩者區別主要是后者為動態加載。
import()函數可以用在任何地方，不僅僅是模塊，非模塊的腳本也可以使用。它是運行時執行，也就是說，什么時候運行到這一句，也會加載指定的模塊。另外，import()函數與所加載的模塊沒有靜態連接關系，這點也是與import語句不相同。
import()類似于 Node 的require方法，區別主要是前者是異步加載，后者是同步加載。
6.3.2 import()適用場景
1. 按需加載。
import()可以在需要的時候，再加載某個模塊。
button.addEventListener('click', event => {import('./dialogBox.js').then(dialogBox => {dialogBox.open();}).catch(error => {/* Error handling */}) });上面代碼中，import()方法放在click事件的監聽函數之中，只有用戶點擊了按鈕，才會加載這個模塊。
2. 條件加載
import()可以放在if代碼塊，根據不同的情況，加載不同的模塊。
if (condition) {import('moduleA').then(...); } else {import('moduleB').then(...); }上面代碼中，如果滿足條件，就加載模塊 A，否則加載模塊 B。
3.動態的模塊路徑
import()允許模塊路徑動態生成。
import(f()).then(...);上面代碼中，根據函數f的返回結果，加載不同的模塊。
6.3.3 vue項目實現按需加載的3種方式
當打包構建應用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。
實現：
1. vue異步組件技術
vue-router配置路由，使用vue的異步組件技術，可以實現按需加載（懶加載）。
但是，這種情況下一個組件生成一個js文件。
舉例如下：
2. es提案的import()
推薦使用這種方式(需要webpack > 2.4)
webpack官方文檔：webpack中使用import()
vue官方文檔：路由懶加載使用import()
vue-router配置路由，代碼如下：
3. webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需加載。
這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。
舉例如下：
6.3.4 Vue 動態組件 component: ()=>import()
動態加載組件的代碼：從 menu.comfig.js 的對象中遍歷鍵值對，進而創建路由。
router.js
menu.comfig.js
module.exports = [{name: '插件',id: 'plugin',sub: [{name: '管理插件',componentName: 'AddPluginLayout'}, {name: '配置插件',componentName: 'AddPluginConfigLayout'}] }, {name: '人員',id: 'person',sub: [{name: '學生管理',componentName: 'StudentManageLayout'}, {name: '教師管理',componentName: 'TeacherManageLayout'}] }]七、vuex
5分鐘帶你入門vuex（vue狀態管理）
八、判斷大寫鍵是否開啟
checkCapslock({ shiftKey, key} = {}) {if (key && key.lenght === 1) { //按下按鍵if ((shiftKey && key >= 'a' && key <= 'z') || //按著shift和此鍵顯示小寫(!shiftKey && key >= 'A' && key <= 'Z') //不按shift此鍵顯示大寫) {this.capsTooltip = true} else {this.capsTooltip = false}}if (key === 'CapsLock' && this.capsTooltip === true) { // 開著大寫鍵this.capsTooltip = false} }總結
以上是生活随笔為你收集整理的ZNZD平台vue项目的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vb登陆界面设计
- 下一篇： vue路由权限（结合服务端koa2）