Vue CLI 3.x 脚手架
Vue CLI 3.x 脚手架
什么是Vue-CLI
Vue-CLI 是 VUE 官方提供,用来搭建项目脚手架的工具,他是vue.js标准的工具,他已经集成了,webpack,内置了好多常用的配置,使我们在使用 Vue 开发项目的时候更加标准化。
安装:
npm install -g @vue/cli
使用命令来查看版本
vue --version
通过脚手架创建出来的项目结构
通过脚手架创建项目请看这里:https://blog.csdn.net/weixin_42776111/article/details/107875228
自定义配置
常用基本配置:https://cli.vuejs.org/zh/config/#vue-config-js
在项目根目录下创建 vue.config.js 文件。
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。严格遵照 JSON 的格式来写。
这个文件应该导出一个包含了选项的对象:
// vue.config.js
module.exports = {
// 选项...
}
常见基础配置:
// vue.config.js
module.exports = {
// 部署应用包时的基本 URL.默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。
// publicPath: '/'
devServer: {
port: 8001, // 端口,如果端口被占用紫红提升1
open: true, // 启动服务后自动打开浏览器
https: false, // 协议
host: 'localhost' // 主机名,也可以是127.0.0.1,或者真机测试的时候0.0.0.0
},
lintOnSave: false, // 默认为true,警告仅仅会被输出到命令行,且不会使得编译失败。
outoutDir: 'dist2', // 默认是dist,存放打包文件的目录
assetsDir: 'assets', // 存放生产的静态资源文件
indexPath: 'out/index.html', // 默认为index.html,指定生成的index.html为输出路径
productionSourceMap: false, // 打包时,不生成.map文件,加快打包
}
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!