【web前端】项目环境搭建

参考资料

ES6：ES6知识点汇总
Vue：官方文档
Vue Router：官方文档
Vuex：官方文档
electrone：官方文档、Electron知识点总结、electron知识点整理
Indexed DB：浏览器数据库 IndexedDB 入门教程、indexedDB介绍、官网
dexie.js：dexie.js 中文教程

github：GitHub Desktop安装与使用教程、0基础的git教程，傻瓜都会用的Github Desktop

基础配置

npm：

# 查看相关配置
npm config ls
# 更新npm到指定版本
npm install -g npm@1.22.10
# 更新npm到最新版
npm install -g npm@latest 
# 全局安装指定版本软件包：
npm install -g yarn@1.22.10

问题与解决

npm报错：npm ERR! cb.apply is not a function

背景：想要将node、npm、yarn等软件的版本调整到与师兄的版本一致，方便跑师兄的代码。
问题产生：先改变了nodejs的版本，导致npm不能用
问题解决：网上看了好多方法都不管用，索性直接把node重装了
后续：重装之后，先调整了npm和yarn的版本，然后再调整node的版本，一切正常！

调整nodejs的版本

Windows下使用gnvm处理，步骤如下：

# 下载gnvm.exe
https://raw.githubusercontent.com/Kenshin/gnvm-bin/master/64-bit/gnvm.exe
# 将gnvm.exe保存到nodejs所在的文件夹（就是node.exe的同名目录）
# 当前目录下进行操作，首先我们查看一下版本，看看能否正常执行
gnvm version
# 要是没问题的话就直接安装指定版本的node了
gnvm install 10.0.0-x64
# 执行结束之后会产生对应的文件夹，如10.0.0文件夹，下面就只有一个node.exe，替换我们原来的node.exe即可

yarn : 无法加载文件 C:\Program Files\nodejs\node_global\yarn.ps1，因为在此系统上禁止运行脚本

背景：yarn安装完之后，运行报错
问题产生：windows上禁止运行脚本？
问题解决：在powershell（不能是普通的cmd窗口哟，否则会找不到命令。可以直接全局搜索powershell，也可以用vscode的终端，因为vscode用的就是powershell）中输入get-ExecutionPolicy，发现是Restricted（拒绝状态），接着执行set-ExecutionPolicy RemoteSigned将状态切换到可用状态。这时get-ExecutionPolicy可以发现我们确实切换到了RemoteSigned状态，并且yarn也可以正常使用了。

yarn install 一直卡在Building fresh packages

问题解决：在项目根目录下创建了.yarnrc文件，复制了以下内容（但是全局是有.yarnc文件的，我也配置了呀，搞不懂了，但这确实能解决）

registry "https://registry.npm.taobao.org"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

学习笔记

ES6

Promise:

const p = new Promise((resolve, reject) => {
   //Promise有三种状态，一是开始pending(未完成)
    //执行 resolve变成resolved 已成功
    //执行reject变成reject 已失败
    //Promise的状态一旦变化了 就不会再改变了
    resolve("succ");
})

//then，根据Promise不同的状态调用不同的回调函数
//并且Then方法的返回值也是Promise对象，对象状态由回调函数的韩返回结果决定，分为以下两种情况，因此Promise是可以链式调用的
//1、回调函数返回的值是非Promise类型的，状态为成功。不写返回值，相当于返回 Undefine。
//2、回调函数返回的值是Promise类型的，状态和返回值就是该Promise对象的状态和返回值
const result=p.then((value) => {
    console.log(value);
    return 123
}, (reason) => {
    console.log(reason);
})

//注：可以在then方法中只使用一个回调，就是成功的回调，失败的回调可以使用p.catch指定。

async和await:

// async修饰的函数是async函数，它的返回值是Promise对象，Promise对象的结果由async函数的返回值决定
// 返回的结果类似于Promise then方法的返回
//因此它的返回值也可以用then方法处理
async function fn() {
    // return 123; // 返回成功的Promise对象，返回值就是123
    // 若报错，则返回失败的Promise对象
    // 若返回的是Promise对象，那么返回的结果就是Promise对象的结果
    return new Promise((resolve, reject) => {
        // resolve("成功啦！");
        reject("失败啦！");
    })
}
const result=fn()
result.then((value) => {
    console.log(value);
    return 123
}, (reason) => {
    console.log(reason);
})


//await实现类似同步的编程方式
//await 必须写在 async 函数中；await 右侧的表达式一般为 promise 对象；await 返回的是 promise 成功的值（不是Promise对象了 单纯就是Promise的值）；await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理；
// 创建Prmise对象
const p = new Promise((resolve,reject)=>{
    resolve("成功啦！");
})
async function fn(){
    // await 返回的是 promise 成功的值
    let result = await p;
    console.log(result); // 成功啦！
}
fn();

ESLint碎碎念

// export default 后面的分号
// data这些属性后面的逗号
// return 后面的分号
export default {
  data() {
    return {
      is_dark: false,
    };
  },
};

// 不应该直接修改参数，而应该复制到临时变量
.then((res) => {
          //res = res.data;
          let data= res.data;
          console.log(res);
        })

ESLint 配置项