十次方中的前端知识点随记
程序员文章站
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基本使用
- 查看
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
主要的编写目录-
src/api
编写请求接口的封装 -
src/assets
静态资源管理 -
src/router
路由信息 -
src/store
存储全局信息方法 -
src/styles
样式信息 -
src/utils
工具方法 -
src/views
视图信息,需要着重修改的地方 -
src/app.vue
全局视图基本框架 -
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 '你是大神' } } }
1.8. 额外备注
- 三点运算符
...
,比如item是一个对象,下列表示item中加了个属性count
{ ...item, count:0 }