vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】

简介: vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】

1.jpg
@[toc]

2.项目的其他配置

2.1 项目运行时,让浏览器自动打开

在package.json中更改script项,改为如下代码,只是在"serve"后面多添加了--open而已

"scripts": {
   
    //在后面添加 --open
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

2.2 关闭eslint的校验功能、配置map不打包、配置默认打开浏览器显示无法访问的问题

在根目录中新建vue.config.js文件(切记名字一定得叫vue.config.js,不能叫其他名字)

问题:为啥需要关闭eslint的校验功能?

答案:比如声明一个变量但是没有使用情况下,eslint校验工具会报错导致项目启动不了。

文件中配置如下代码

module.exports = {
   
    //配置map,减少打包后的dist的大小
      productionSourceMap:false,
    // 关闭eslint语法校验
    lintOnSave:false,
    devServer: {
   
        //解决默认打开浏览器,会出现0.0.0.0:8080,浏览器显示无法访问
        host: 'localhost'
    }
}

2.3 给src文件夹简写方法,配置别名,方便引入资源

在根目录中新建jsconfig.json文件,配置别名@提示【@代表的是src文件夹,这样将来文件过多,找的时候方便很多】

jsconfig.json文件写入如下代码

{
   
    // 配置:用 @ 代替src文件夹
    "compilerOptions": {
   
        "baseUrl": "./",
        "paths": {
   
            "@/*": ["src/*"]
        }
    },
    "exclude": ["node_modules","dist"]
}

本人其他相关文章链接

1.vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
2.vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
3.vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
4.vue尚品汇商城项目-day01【3.项目路由的分析】
5.vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
6.vue尚品汇商城项目-day01【5.路由组件的搭建】
7.vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
8.vue尚品汇商城项目-day01【7.路由传参】
9.vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】

目录
相关文章
|
5月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
502 2
|
4月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
423 137
|
7月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
389 0
|
JavaScript
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
|
JavaScript 数据可视化 前端开发
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
400 0
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
|
8月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
969 0
|
10月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
1211 4
|
8月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
9月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
1239 78
|
10月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍

热门文章

最新文章