web-note

web 用到 各部分功能 如何使用

# html   css   bootstrap   javascript   jquery   json   ajax    vue   element-ui
# node.js    AnglerJs

# html
  -- 标签
# css 
  -- 样式
  -- 
  -- 
  -- class="a" .a{ font-size: 18px; }   id="b" #b{}
# bootstrap
  -- 框架  最大作用: 封装css样式 直接用
  -- 
  -- 分页
    --  

    --      
«
    --      
1
    --      
2
    --      
3
    --      
4
    --      
5
    --      
»
    --  
# javascript
  -- 使页面动起来  动画
  -- 
  -- 
  -- 变量 var a = 1; 函数function do(){} 对象 var dx = {};
  -- 页面加载完成执行   !function(){}();
# jquery
  -- 封装js 另一套api
  -- 
  -- 入口函数  $(function(){   代码  $("#id").click(function(){  点击之后代码  });   });
# json
  -- json 轻量级数据交换格式
  -- js对象 和 字符串 互转
  -- json串 "[ {name:"lvjing",age:"23"},{} ]" 
  -- js对象 [ {name:"lvjing",age:"23"},{} ]
  -- JSON.parse(字符串)  JSON.stringify(js对象)
# ajax
  -- jquery的一个方法
  -- 异步访问,局部刷新
  -- 语法 : 添加jquery
       --使用 : 1. 直接放在$(function(){ 中  })  会在页面加载完成之后执行  2. 可以放在点击一个按钮$("#btn").click(function(){ 执行ajax });
        $.ajax({
          type:"post",
          url:"",
          data:{
            "name":"lvjing",
            "age":"23"
          },
          contentType:"application/json;charset=utf8",
          dataType:"json",
          success:function(data){
            $("#username").text(data.name);
          },
          error:function(e){
            console.log("error");
          }
        });

# vue

# element-ui

# node.js

# 我写过的功能
  1. 鼠标点击任意位置出现文字
  2. 背景动态先装粒子特效
  3. 获取键盘点击的哪一个  -使用在输入完密码回车执行登录 
  4. 在html页面中引入另一个html页面的标签
  5. 取消按钮 x  

vue搭建环境

# vue 搭建环境
  > 安装: nodejs
        npm -v
        npm config get registry  当前配置镜像
        npm config set registry https://registry.npm.taobao.org  使用淘宝镜像
  > vue 脚手架 vue-cli
        npm install vue-cli -g 安装vue-cli脚手架
        npm uninstall vue-cli -g 卸载vue-cli脚手架
        vue --version
  > 创建vue项目
        工作空间下 dos
        vue init webpack jt
            参数: 
                Project Name								项目名称，默认，回车
                Project description 						默认，回车
                Author	chenzs								作者
                vue build									默认，回车
                install vue-router?						是否安装router，输入：y 安装
                Use ESLint to lint your code?				规则引擎，过于严苛，输入：n
                Setup unit tests?							单元测试，输入：n
                Setup e2e tests with Nightwatch(Y/n)?	测试框架Nightwatch，输入：n
                Should we run 'npm install' for you after the project has been created?	默认npm，回车
  > 启动项目
        npm run dev   http://localhost:8081

# vue 项目
  > App.vue 主界面
  > 自定义组件  Item.vue   在主界面中 进行使用自定义组件
  > components中写自定义组件  template中写页面 script中写数据  style中样式
  > 使用element-ui main.js中导包 导入element-ui的插件

# element-ui
  > 安装 npm i element-ui -S
  > 修改vue中main.js 导入element-ui
      > import ElementUI from 'element-ui';
      > import 'element-ui/lib/theme-chalk/index.css';
      > Vue.use(ElementUI);
  > 使用
      > div中使用element-ui官网样式标签

# Promise 
 Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。

# axios
  Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
  > npm install axios --save-dev
  > main.js
    > import axios from 'axios';
    > Vue.prototype.$http = axios;

# less-loader  less 
  less-loader webpack 将 Less 编译为 CSS 的 loader。
  Less 是一门 CSS 预处理语言，
  它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
  > npm install less less-loader --save-dev

# vue-quil-editor   富文本编辑器
  > npm install vue-quill-editor --save
  > main.js
    > import VueQuillEditor from 'vue-quill-editor';
    > import 'quill/dist/quill.core.css';
    > import 'quill/dist/quill.snow.css';
    > import 'quill/dist/quill.bubble.css';
    > Vue.use(VueQuillEditor);

# echarts   一个基于 JavaScript 的开源可视化图表库
  > npm install echarts --save
  > main.js
    > import echarts from 'echarts';
    > Vue.prototype.$echarts = echarts;



  
# vue搭建环境2
  node.js
  淘宝影像   npm config set registry https://registry.npm.taobao.org  
  安装vue 客户端  npm install -g @vue/cli --force
  初始化   vue ui
  客户端
      创建 1.详情  2.预设 手动  3.功能 router  使用配置文件     4.配置  ESLint+ StandardConfig 
      插件 1.vue-cli-plugin-element   手动导入   2.axios   3.less-loader  npm install [email protected]    4.less    5.vue-quil-editor   6. echars插件
      关闭ESLint校验
      项目打包    npm init -y    npm i express -S
      

# 知识点
> 在html页面中引入另一个html页面的标签