Vue3_note

2019-01-10  本文已影响0人  glAkihi

vue-cli3 AND webpack4

Vue-cli3

基础生成

  1. vue-cli3 安装全局

    运行 cnpm install -g @vue-cli

  2. vue -h,--help

    vue -v,--version 查看当前版本

    create 创建新项目

    add 往项目里面添加新的插件

    invoke 已经创建好的项目去调用该插件

    inspect 检查 webpack 的配置

    serve 开发环境 npm server

    build 生产环境 需要打包到 build

    ui 打开一个 vue-cli 的ui界面进行配置 以及项目调整~

    init 生成一个项目

    1. 如果还是不了解那个命令 可以进行 vue create --help 这样可以进行详细说明

Vue-cli3.x 自定义脚手架

vue-cli3.x 新出的添加插件的方法

Vue-cli3.x 全局环境变量的使用

Vue-cli3.x 独立运行 .vue 文件 不需要依赖 脚手架

Vue-cli3.x 图形页面构建项目

Vue-cli3.x 配置基础的路径

Vue-cli3.x 配置跨域请求

Vue-cli3.x 加载美团数据JSON

VUE2 模块解析

build 模块

Vue-cli3 了解 And 项目初始化

安装运行

  1. 运行 cnpm i @vue/cli -S

  2. 创建项目 vue create init-vue

  3. 因为项目中 需要运行 vue-cli3 的东西 也由于在原先项目中安装了 vue-cli 2.x 的版本

    所以需要 uninstall vue-cli2.x 原先的版本 安装 vue-cli3.x的版本

    1. cnpm uninstall -g vue-cli
    2. cnpm install -g @vue/cli

  4. 然后再 创建项目 vue create init-vue

  5. 或者使用图形化界面来创建和管理项目

    1. vue ui

    2. 上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

  6. 创建项目

    1. vue create 项目名称

      会让选择默认(default) 还是手动 (Manually)

      ​ 选择默认的话 一路回车就可以了

      手动配置的话 会让选择其选项 空格键 是选择单个 a键是全选

      ​ 然后选择需要的插件配置 enter就可以进行下一项

      vue-router 默认 hash 模式 所以选择默认的 选择了 n 而不是 history 模式

      然后会询问 安装 哪一种 css 预处理语言 scss less等等

      然后让你选择 自动化代码格式化检测 配合 VSCode 编辑器

      ​ Prettier - Code formatter 插件 所以选择最后一个

      然后选择 Pick addition lint features

      ​ 第一个 是 保存就检测

      ​ 第二个 是 fix 和 commit 的时候检查

      Pick a unit testing solution: 选择单元测试解决方案

      ​ Mocha + chai

      ​ Jest

      Mocha 是流行的 js 测试框架之一 通过他添加和运行测试 从而保证代码质量 chai是断言库。都选择

      然后会让选择 babel eslint postcss 这些配置文件放哪 一般选择第一个

      ​ Where do you prefer placing config for Babel pstcss...?

      ​ 第一个是 放置独立文件夹 第二个是 放置package.json文件里

      再之后 倒数第二行 是问是否将以上这些保存为 未来的项目配置

      ​ 是的话 下次创建项目 可以选择刚刚配置好的配置 不用再搭配

      ​ 最后一个是选择名字 再创建的时候 刚刚配置好的 名字 形式出现

  7. 启动命令

    // 1. 进入项目
cd 项目名称 
// 或者 cd vue-webpack-demo2
// 2. 安装依赖
npm i
// 3. 启动
npm run serve

  8. 相比 vue-cli 2.x 创建的目录

    1. vue-cli3.x 的目录 看不见 webpack 的配置
    2. 启动命令变化 npm run dev 或者 npm start 改变为 npm run serve
    3. 安装过程的变化 配置可以保存 下次可以再用
    4. 手动配置 webpack
      1. 在根目录 下 新建一个 vue.config.js 文件 进行 相关的配置
    const path = require('path');

module.exports = {
 // 基本路径
 baseUrl: './',
 // 输出文件目录
 outputDir: 'dist',
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},
 configureWebpack: (config) => {
     if (process.env.NODE_ENV === 'production') {
         // 为生产环境修改配置...
         config.mode = 'production';
     } else {
         // 为开发环境修改配置...
         config.mode = 'development';
     }

     Object.assign(config, {
         // 开发生产共同配置
         resolve: {
             alias: {
                 '@': path.resolve(__dirname, './src'),
                 '@c': path.resolve(__dirname, './src/components')
             }
         }
     });
 },
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: true,
 // css相关配置
 css: {
     // 是否使用css分离插件 ExtractTextPlugin
     extract: true,
     // 开启 CSS source maps?
     sourceMap: false,
     // css预设器配置项
     loaderOptions: {},
     // 启用 CSS modules for all css / pre-processor files.
     modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 // PWA 插件相关配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相关配置
 devServer: {
     open: process.platform === 'darwin',
     host: '0.0.0.0',
     port: 8080,
     https: false,
     hotOnly: false,
     // proxy: {
     //  // 设置代理
     //  // proxy all requests starting with /api to jsonplaceholder
     //  'http://localhost:8080/': {
     //      target: 'http://baidu.com:8080', //真实请求的目标地址
     //      changeOrigin: true,
     //      pathRewrite: {
     //          '^http://localhost:8080/': ''
     //      }
     //  }
     // },
     before: (app) => {}
 },
 // 第三方插件配置
 pluginOptions: {
     // ...
 }
};

Vue-cli 3.x 和旧版本使用了相同的 vue 命令 所以 vue-cli 2.x 被覆盖了 如果仍要使用旧版本的 vue init 功能

​ 可以全局安装一个 桥接工具

​ npm i -g @vue/cli-init

​ vue init webpack my-project

踩坑点

npm 的全局路径被修改了

我都不记得在装什么包的时候修改了 mac 中 npm 的全局路径了，平时 npm 运行各种命令不报错。

全局卸载 vue-cli 命令行：

npm uninstall vue-cli -g;

但是今天全局卸载 vue-cli 的时候一直不成功，搞了一个小时，结果看了一下 npm 的全局路径，才发现路径不对！！！

如果你的 npm 的全局路径也变了，请按如下步骤修改加默认的。

方法一：

原因：npmr 的配置改变了，导致正确的 npmr 不能用。

cd 

open .npmrc

方法二：

npm config set prefix /usr/local  //是默认路径 修改了路径会出现错误。

按上面的方法修改完，再全局卸载 vue-cli 果然就成功了。

之前看的一些问题总结的笔记

async 和 await 不同的调用加返回 都是什么情况和值

async function(){
   // 这个会强制转换成 promise 了
   // 
}
 // await 呢就是将这个 promise 结果转换成别的结果

async/await

Async

await

function showAvatar(githubUser) {
  return new Promise(function(resolve, reject) {
    let img = document.createElement('img');
    img.src = githubUser.avatar_url;
    img.className = "promise-avatar-example";
    document.body.append(img);

    setTimeout(() => {
      img.remove();
      resolve(githubUser);
    }, 3000);
  });
}
// 1.我们需要将.then()替换为await
// 2.此外，我们应该让函数变成async，这样await才能够工作

比较理解的 async await

await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。 下面上代码

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(' enough sleep~');
        }, second);
    })
}
function normalFunc() {
    console.log('normalFunc');
}
async function awaitDemo() {
    await normalFunc();
    console.log('something, ~~');
    let result = await sleep(2000);
    console.log(result);// 两秒之后会被打印出来
}
awaitDemo();
// normalFunc
// VM4036:13 something, ~~
// VM4036:15  enough sleep~

实例中进行说明

错误处理

上述代码 好像给的都是 resolve 的情况 那么 reject 的时候我们应该如何处理呢？

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('want to sleep~');
        }, second);
    })
}

async function errorDemo() {
    let result = await sleep(1000);
    console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~

// 为了处理Promise.reject 的情况我们应该将代码块用 try catch 包裹一下
async function errorDemoSuper() {
    try {
        let result = await sleep(1000);
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}

errorDemoSuper();// want to sleep~
// 有了 try catch 之后我们就能够拿到 Promise.reject 回来的数据了。

小心你的并行处理!!!

对于初学者来说一不小心就将 ajax 的并发请求发成了阻塞式同步的操作了，我就真真切切的在工作中写了这样的代码。 await 若等待的是 promise 就会停止下来。业务是这样的，我有三个异步请求需要发送，相互没有关联，只是需要当请求都结束后将界面的 loading 清除掉即可。

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request done! ' + Math.random());
        }, second);
    })
}

async function bugDemo() {
    await sleep(1000);
    await sleep(1000);
    await sleep(1000);
    console.log('clear the loading~');
}

bugDemo();

恩， 完美。看吧~ async-await并不能取代promise.

await in for 循环

最后一点了，await必须在async函数的上下文中的。

// 正常 for 循环
async function forDemo() {
    let arr = [1, 2, 3, 4, 5];
    for (let i = 0; i < arr.length; i ++) {
        await arr[i];
    }
}
forDemo();//正常输出
// 因为想要炫技把 for循环写成下面这样
async function forBugDemo() {
    let arr = [1, 2, 3, 4, 5];
    arr.forEach(item => {
        await item;
    });
}
forBugDemo();// Uncaught SyntaxError: Unexpected identifier

补充

async function timeout() {
    return 'hello world'
}
console.log(timeout());     // Promise { 'hello world' }
console.log('虽然在后面，但是我先执行');        // 虽然在后面，但是我先执行

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('虽然在后面，但是我先执行');    
// 虽然在后面，但是我先执行     hello world

Promise then 就是变成同步调用？

箭头函数的this指向问题

上一篇 下一篇

猜你喜欢

热点阅读