一、安裝配置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 文件，添加如下內容：

registry = http://registry.npm.taobao.org

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.org

4）終端安裝

此方式為一次性使用，每次安裝(或查看)都要帶上 --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什么時候要加{ }

import { isvalidUsername ，validateUrl} from ‘@/utils/validate’ //也可以分開兩次寫，導入的時候都帶花括號

import isvalidUsername from ‘@/utils/validate’ //導入的時候沒有花括號

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就可以了.

但是一個文件內最多只能有一個export default。

其實此處相當于為sex變量值"boy"起了一個系統默認的變量名default，自然default只能有一個值，所以一個文件內不能有多個export default。

本質上，a.js文件的export default輸出一個叫做default的變量，然后系統允許你為它取任意名字。所以可以為import的模塊起任何變量名，且不需要用大括號包含。

b.js

import any from "./a.js" import any12 from "./a.js" console.log(any,any12) // boy,boy

6.3 動態加載

在router/index.js中，不是像電商后臺項目一樣，在一開始就import所有的組件，而是創建路由時，按需加載：
電商項目：

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Login from '@/components/login/login.vue' import Home from '@/components/home/home.vue' import Welcome from '@/components/home/welcome.vue' import Users from '@/components/users/users.vue' ......

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文件。
舉例如下：

{path: '/promisedemo',name: 'PromiseDemo',component: resolve => require(['../components/PromiseDemo'], resolve)}

2. es提案的import()

推薦使用這種方式(需要webpack > 2.4)
webpack官方文檔：webpack中使用import()
vue官方文檔：路由懶加載使用import()
vue-router配置路由，代碼如下：

// 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。 const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1') const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2') // 下面2行代碼，指定了相同的webpackChunkName，會合并打包成一個js文件。 // const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo') // const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2') export default new Router({routes: [{path: '/importfuncdemo1',name: 'ImportFuncDemo1',component: ImportFuncDemo1},{path: '/importfuncdemo2',name: 'ImportFuncDemo2',component: ImportFuncDemo2}] })

3. webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需加載。
這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。
舉例如下：

{path: '/promisedemo',name: 'PromiseDemo',component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo')},{path: '/hello',name: 'Hello',// component: Hellocomponent: r => require.ensure([], () => r(require('../components/Hello')), 'demo')}

6.3.4 Vue 動態組件 component: ()=>import()

動態加載組件的代碼：從 menu.comfig.js 的對象中遍歷鍵值對，進而創建路由。
router.js

import Vue from 'vue' import Router from 'vue-router' import menus from '@/config/menu-config'Vue.use(Router) var routes = [] menus.forEach((item) => {item.sub.forEach((sub) => {routes.push({path: `/${sub.componentName}`,name: sub.componentName,component: () => import(`@/components/layout/${sub.componentName}`)})}) }) export default new Router({mode: 'history',base: process.env.BASE_URL,routes: routes })

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项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。