Vue-Cli4笔记
时间:2020-03-24
本文章向大家介绍Vue-Cli4笔记,主要包括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-env
和Autoprefixer
用来确定需要转译的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
没有了配置webpack
的config
与build
目录,配置由vue.config.js
定义,vue.config.js
文件定义于根目录,相关配置信息参阅 Webpack配置
配置代理
module.exports = {
devServer: {
proxy: {
'/': {
target: 'http://www.example.com',
ws: true,
changeOrigin: true,
pathRewrite: {}
}
}
}
}
原文地址:https://www.cnblogs.com/WindrunnerMax/p/12558393.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法