十次方中的前端知识点随记

老梁

发布于 2019-09-10 18:41:10

4630

发布于 2019-09-10 18:41:10

文章被收录于专栏：Java工程师成长之路Java工程师成长之路

1. 十次方中的前端知识点随记

好久没上传笔记了，主要最近的笔记都零零散散，知识点也不集中，就不传了；最近项目想用到前后端分离，而且前端我也想参与下，就先基本的学一遍，记点零星的笔记，各位能从中看到有用的东西最好

1.1. Node.js

1.1.1. node基本使用

查看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命令

node package manager 用来node包管理工具
npm init初始化工程，生成package.json，相当于maven中pom
npm install express 安装模块express
npm root -g显示全局目录
npm install jquery -g，全局安装
只有package.json时，需要npm install下载对应的node_modules
安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org
通过cnpm -v查看版本
使用cnpm下载js库，cnpm install需要下载的js库
运行npm run dev
编译工程npm run build

1.1.3. webpack

打包工具
cnpm install webpack -g全局安装
cnpm install webpack-cli -g命令包
webpack -v查看是否安装完毕，安装版本
打包命令webpack
CSS打包，需要先安装cnpm install style-loader css-loader --save-dev

1.2. 开发工具VsCode

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

1.3. ES6

ECMAScript是由ECMA制定的规范
var是全局的，let作用域局部的
常量声明const，常量不可变
模板字符串let name = "bac";console.log('hello, ${name}')
函数默认参数

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

箭头函数

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

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

对象初始化简写

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

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

解构

//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);

Spread Operator 追加数组，对象...

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

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

import和export导入导出

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

export {fn0}

//从某个js文件中导入某个模块
import {fn0} from './lib'

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

Promise异步编程的一种解决方案

1.2. ElementUI

饿了吗开源的前端架构，基于vue.js
脚手架推荐：vueAdmin-template-master
cnpm install,npm run dev

1.3. EasyMock

模拟请求数据，在后端没完成前，模拟数据

1.4. NUXT

服务端渲染框架，基于vue.js

1.5. 整理一个vueAdmin-template-master的架构

build构建目录，构建的相关配置
config配置目录，需要修改config/dev.env.js中的mock路径，此处测试可以用easyMock，生产则改config/prod.env.js
node_modules通过cnpm install安装的依赖，不用自己写
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
package.json打包文件，一般不用修改

1.6. 路由配置

在模板代码template中，<router-view/>用来表明需要路由的标签区域
<router-link to="/" >首页</router-link>表示路由连接地址，连接到另一个模板
路由连接到模板的配置

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安装使用

安装

# 创建一个基于 webpack 模板的新项目
vue init webpack vuexdemo
# 安装依赖，走你
cd vuexdemo
cnpm install --save vuex
npm run dev

store创建

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

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/>'
})

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

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

this.$store.commit('increment')

1.7.1. 提交荷载

需要加额外参数，则

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

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

1.7.2. Action

提交的是mutation，可以包含任意异步操作
action的提交是用如下

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

this.$store.dispatch('increment')

所以

key	方法
mutations	$store.commit('increment')
actions	$store.dispatch('increment')

1.7.3. 派生属性Getter

调用

{{$store.getters.remark}}

配置

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