zoukankan      html  css  js  c++  java
  • Vue-Cli4笔记

    Vue-Cli4与Vue-Cli2区别浅谈

    当时学习 Vue-Cli 的时候看的是 Vue-Cli2 的相关教程,当把 package.json 上传 github 的时候提醒有安全问题,于是准备使用最新版的 Vue-Cli ,我一直认为才更新到 Vue-Cli3,没想到都到Vue-Cli4了
    可能有很多特性在 Vue-Cli3 时就有了,做个笔记记录一下

    创建工程

    Vue-Cli4文档推荐以下两种方式创建项目

    vue create my-project
    # OR
    vue ui # 可视化操作
    

    如果仍然需要使用vue init webpack初始化项目的话,则需要安装cli-init,但是拉取的仍然是Vue-Cli2.0版本

    npm install -g @vue/cli-init
    

    启动服务

    Vue-Cli4中使用npm run serve运行开发模式,其配置为

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
      }
    

    也可以使用vue ui进行可视化操作

    浏览器兼容

    package.json文件里的browserslist字段 (或一个单独的.browserslistrc文件),指定了项目的目标浏览器的范围。这个值会被@babel/preset-envAutoprefixer用来确定需要转译的JavaScript特性和需要添加的CSS浏览器前缀。查阅 此处 了解如何指定浏览器范围

    代码拆分

        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
        /* webpackChunkName: "about" */
    

    vue-router提供了一个About组件示例,为此路由生成单独的块,访问路由时延迟加载,可参阅 Prefetch与Preload

    配置相关

    Vue-Cli4没有了配置webpackconfigbuild目录,配置由vue.config.js定义,vue.config.js文件定义于根目录,相关配置信息参阅 Webpack配置

    配置代理

    module.exports = {
    	devServer: {
    		proxy: {
    			'/': {
    				target: 'http://www.example.com',
    				 ws: true,
    				changeOrigin: true,
    				pathRewrite: {}
    			}
    		}
    	}
    }
    
  • 相关阅读:
    oracle proc 插入操作性能优化实践
    vmware 虚拟机共享文件夹无法显示问题解决
    oracle启动报错:ORA-03113
    c语言中sprintf()函数中的%使用
    c 的内存分配
    c实现队列
    c实现循环链表
    MantisBT导出Excel文件名显示中文的修改方法
    怎样通过Qt编写C/C++代码查询当前Linux的版本号?
    Kotlin Android Extensions: 与 findViewById 说再见 (KAD 04) -- 更新版
  • 原文地址:https://www.cnblogs.com/WindrunnerMax/p/12558393.html
Copyright © 2011-2022 走看看