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.路由跳转与传参相关面试题】

目录
相关文章
|
4天前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
18 3
|
1天前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
15 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
1天前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
10 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
4天前
|
JavaScript
【小白懂系列】Vue CLi脚手架创建第一个VUE项目
【小白懂系列】Vue CLi脚手架创建第一个VUE项目
15 2
|
7天前
|
存储 资源调度 JavaScript
Vite是什么?怎样使用Vite创建Vue3项目?
Vite是什么?怎样使用Vite创建Vue3项目?
14 0
|
3天前
|
JavaScript 开发者
|
3天前
|
前端开发 JavaScript 开发者
|
1天前
|
数据可视化 JavaScript 前端开发
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
9 2
|
1天前
|
缓存 JavaScript UED
vue的动态组件 keep-alive
【10月更文挑战第6天】
11 3
|
23小时前
|
JavaScript UED
Vue双向数据绑定的原理
【10月更文挑战第7天】