1. 十次方中的前端知識點隨記

好久沒上傳筆記了，主要最近的筆記都零零散散，知識點也不集中，就不傳了；最近項目想用到前後端分離，而且前端我也想參與下，就先基本的學一遍，記點零星的筆記，各位能從中看到有用的東西最好

1.1. Node.js

1.1.1. node基本使用

1. 查看nodejs.cn中文文檔地址

var http = require("http")引入模塊
http.createServer(function(request,response){
    response.writeHead(200,{'Content-Type':'text/plain'});
    resposne.end('Hello world!');
}).listen(8888);

cmd運行`node demo4`

製作模塊
exports.add=function(x,y){  
    return x+y;
}

1.1.2. NPM命令

1. node package manager 用來node包管理工具
2. npm init初始化工程，生成package.json，相當於maven中pom
3. npm install express 安裝模塊express
4. npm root -g顯示全局目錄
5. npm install jquery -g，全局安裝
6. 只有package.json時，需要npm install下載對應的node_modules
7. 安裝淘寶鏡像npm install -g cnpm --registry=https://registry.npm.taobao.org
8. 通過cnpm -v查看版本
9. 使用cnpm下載js庫，cnpm install需要下載的js庫
10. 運行npm run dev
11. 編譯工程npm run build

1.1.3. webpack

1. 打包工具
2. cnpm install webpack -g全局安裝
3. cnpm install webpack-cli -g命令包
4. webpack -v查看是否安裝完畢，安裝版本
5. 打包命令webpack
6. CSS打包，需要先安裝cnpm install style-loader css-loader --save-dev

1.2. 開發工具VsCode

1. 安裝插件的方式支持不同語言
2. 安裝地址https://code.visualstudio.com
3. 常用插件vetur，HTML Snippets，HTML CSS Support，Debugger for Chrome,VueHelper

1.3. ES6

1. ECMAScript是由ECMA制定的規範
2. var是全局的，let作用域局部的
3. 常量聲明const，常量不可變
4. 模板字元串let name = "bac";console.log('hello, ${name}')
5. 函數預設參數

function action(num = 200){
    console.log(num)
}
action();
action(100);

1. 箭頭函數

function add(a,b){
    return a+b;
}
console.log(add(100,200));

//ES6
add = (a,b) => {
    return a+b;
}
add = (a,b) => a+b;

1. 對象初始化簡寫

//  ES5
function people(name ,age){
    return {
        name:name,
        age: age
    }
}

//ES6
function people(name, age){
    return {
        name,
        age
    }
}

1. 解構

//ES5
const people= {
    return {
        name:name,
        age: age
    }
}
const name = people.name;
const age = people.age;

//ES6
const {name ,age} = people;
console.log(name);
console.log(age);

1. Spread Operator 追加數組，對象...

const color = ['red','green'];
const colorful =[...color,'pink'];

const people = {name:'xyx',age:20};
const peopleful = {...people,address:'aaaa'}

1. import和export導入導出

let fn0=function(){
    console.log('fne...');
}

export {fn0}

//從某個js文件中導入某個模塊
import {fn0} from './lib'

node8 不支持import，可以用require，不用import，或者用babel的命令行工具來執行

1. Promise非同步編程的一種解決方案

1.2. ElementUI

1. 餓了嗎開源的前端架構，基於vue.js
2. 腳手架推薦：vueAdmin-template-master
3. cnpm install,npm run dev

1.3. EasyMock

1. 模擬請求數據，在後端沒完成前，模擬數據

1.4. NUXT

1. 服務端渲染框架，基於vue.js

1.5. 整理一個vueAdmin-template-master的架構

1. build構建目錄，構建的相關配置
2. config配置目錄，需要修改config/dev.env.js中的mock路徑，此處測試可以用easyMock，生產則改config/prod.env.js
3. node_modules通過cnpm install安裝的依賴，不用自己寫
4. src主要的編寫目錄
   1. src/api編寫請求介面的封裝
   2. src/assets靜態資源管理
   3. src/router路由信息
   4. src/store存儲全局信息方法
   5. src/styles樣式信息
   6. src/utils工具方法
   7. src/views視圖信息，需要著重修改的地方
   8. src/App.vue全局視圖基本框架
   9. src/main.js主入口，實例化Vue
5. package.json打包文件，一般不用修改

1.6. 路由配置

1. 在模板代碼template中，<router-view/>用來表明需要路由的標簽區域
2. <router-link to="/" >首頁</router-link>表示路由連接地址，連接到另一個模板
3. 路由連接到模板的配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import List from '@/components/list'
import Item from '@/components/item'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/list',
      name: 'List',
      component: List
    },
    {
      path: '/item/:id',
      name: 'Item',
      component: Item
    }
  ]
})

1.7. vuex安裝使用

1. 安裝

# 創建一個基於 webpack 模板的新項目
vue init webpack vuexdemo
# 安裝依賴，走你
cd vuexdemo
cnpm install --save vuex
npm run dev

1. store創建

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        count: 0
    }
})
export default store

1. store納入vue

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

1. count的值不能直接修改，需要通過commit（mutation）

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++
        }
    }
})

this.$store.commit('increment')

1.7.1. 提交荷載

1. 需要加額外參數，則

mutations: {
        increment (state,x) {
            state.count += x
        }
    }

this.$store.commit('increment',10)

1.7.2. Action

1. 提交的是mutation，可以包含任意非同步操作
2. action的提交是用如下

mutations: {
        increment(state,x){
            state.count+=x
        }
    },
actions: {
        increment(context,x){
            context.commit('increment',x)
        }
    }

this.$store.dispatch('increment')

所以

1.7.3. 派生屬性Getter

1. 調用

{{$store.getters.remark}}

1. 配置

getters: {
        remark(s){
            if(s.count<50){
                return '加油'
            }else if(s.count<100){
                return '你真棒'
            }else{
                return '你是大神'
            }
        }
    }

1.8. 額外備註

1. 三點運算符...，比如item是一個對象，下列表示item中加了個屬性count

{
    ...item,
    count:0
}