vue-cli3.0使用及配置(部分)
时间:2019-04-15
本文章向大家介绍vue-cli3.0使用及配置(部分),主要包括vue-cli3.0使用及配置(部分)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.先全局安装vue-cli3.0
检测安装:
vue -V
- 1
- 2
2.创建项目(这个就跟react创建脚手架项目比较像了)
这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是
让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个
- 1
- 2
当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键
选择哪一个,按空格键确定,所有的都选择好后,按enter键进行下一步,这里
演示,我随便选了几个
- 1
- 2
- 3
下一步之后问询问你安装哪一种 CSS 预处理语言,你随意选择,我是一直用的less
- 1
上面这个是问你选择哪个自动化代码格式化检测,配合vscode编辑器的
Prettier - Code formatter插件,我选的随后一个
- 1
- 2
这里第一个选项是问你是否保存刚才的配置,选择确定后你下次再创建新项目
就有你以前选择的配置了,不用重新再配置一遍了
- 1
- 2
上边这俩意思问你像,babel,postcss,eslint这些配置文件放哪?
第一个是:放独立文件放置
第二个是:放package.json里
这里推荐放单独配置文件,选第一个
- 1
- 2
- 3
- 4
上边倒数第二行问你是否将以上这些将此保存为未来项目的预配置吗?
最后一个是描述项目,你随意选择,点击确定就开始下载模板了
- 1
- 2
下载好后,项目结构就变成这样了,相比2.0精简了很多,
然后cd 进项目,启动服务npm run serve,
这里发现少了vue.config.js文件,那以前的配置怎么搞?
- 1
- 2
- 3
上边是2.0的目录结构
这个是3.0的目录结构,比2.0少了好多,这些都放在@vue/文件下了,你可以打开看看
下边你要做的就是在根目录下新建一个vue.config.js文件,进行你的配置,具体配置看文档,我在最下边简单罗列了几个
- 1
当然如果你不想用3.0的话,还是可以继续使用2.0的,官方文档是这样说的:
- 1
这里简单罗列vue,config.js一些配置项
当然你配置接口地址时还是通过下边这个来获取
在main.js里或者单独配置接口地址的文件里:
var env = process.env.NODE_ENV
console.log(env)
- 1
- 2
- 3
- 4
- 5
// vue.config.js 配置说明
// 这里只列一部分,具体配置惨考文档啊
module.exports = {
// baseUrl type:{string} default:'/'
// 将部署应用程序的基本URL
// 将部署应用程序的基本URL。
// 默认情况下,Vue CLI假设您的应用程序将部署在域的根目录下。
// https://www.my-app.com/。如果应用程序部署在子路径上,则需要使用此选项指定子路径。例如,如果您的应用程序部署在https://www.foobar.com/my-app/,集baseUrl到'/my-app/'.
baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
/*
构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
个对象,其中键是条目的名称,而该值要么是指定其条目、模板和文件名的对象,要么是指定其条目
的字符串,
注意:请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
*/
// pages: {
// index: {
// entry for the page
// entry: 'src/index/main.js',
// the source template
// template: 'public/index.html',
// output as dist/index.html
// filename: 'index.html'
// },
// when using the entry-only string format,
// template is inferred to be `public/subpage.html`
// and falls back to `public/index.html` if not found.
// Output filename is inferred to be `subpage.html`.
// subpage: 'src/subpage/main.js'
// },
// lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
lintOnSave: true,
// productionSourceMap:{ type:Bollean,default:true } 生产源映射
// 如果您不需要生产时的源映射,那么将此设置为false可以加速生产构建
productionSourceMap: false,
// devServer:{type:Object} 3个属性host,port,https
// 它支持webPack-dev-server的所有选项
devServer: {
port: 8085, // 端口号
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}, // 配置多个代理
}
}
- 在ASP.NET MVC中通过URL路由实现对多语言的支持
- AI加持下的假肢将会越来越聪明
- 通过几个Hello World感受.NET Core全新的开发体验
- ASP.NET MVC三个重要的描述对象:ControllerDescriptor
- 基于自制数据集的MobileNet-SSD模型训练
- .NET Core采用的全新配置系统[1]: 读取配置数据
- ASP.NET MVC三个重要的描述对象:ActionDescriptor
- 升级比特币区块链后,以特币已叩响成功的大门
- .NET Core采用的全新配置系统[2]: 配置模型设计详解
- 采用双拼域名meicai.cn的美菜网融资4.5亿美元
- 区块链技术或将迎来突破性进展,以特币未来生机勃勃
- 配置多个网卡的OpenStack VM
- .NET Core采用的全新配置系统[3]: “Options模式”下的配置是如何绑定为Options对象
- 游戏用户中心开发
- 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 数组属性和方法
- 服务发现之consul的介绍、部署和使用
- Mybatis处理查询map 为null 导致查询map无该key对象
- 深入对比TOML,JSON和YAML
- consul配置参数大全、详解、总结
- 跳跃表原理和实现
- 你动、蒙娜丽莎跟着一起动,OpenCV这么用,表情口型造假更难防了
- 好用的PHP高性能多并发restful的HTTP Client
- Golang程序调试工具介绍(gdb vs dlv)
- tcp_tw_reuse、tcp_tw_recycle注意事项
- PHP性能规范
- PHP代码规范
- php调试利器之phpdbg
- 【DB笔试面试860】在Oracle中,如何判断Oracle是32位还是64位?
- JsonPath实践(四)
- Python代码转Latex公式,这个开源库用一行代码帮你搞定