欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-28 20:17:40
1. 十次方中的前端知识点随记 好久没上传笔记了,主要最近的笔记都零零散散,知识点也不集中,就不传了;最近项目想用到前后端分离,而且前端我也想参与下,就先基本的学一遍,记点零星的笔记,各位能从中看到有用的东西最好 1.1. Node.js 1.1.1. node基本使用 1. 查看 中文文档地址 v ......

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. 常用插件veturhtml snippetshtml css supportdebugger 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')

所以

key 方法
mutations $store.commit('increment')
actions $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
}