电商项目尚品汇学习笔记

本文参考其他文章自己整理补充的,要阅读原文请查看:尚品汇项目笔记_爱哭的毛毛虫的博客-CSDN博客_尚品汇项目

1、vue文件目录

public文件夹:静态资源,webpack进行打包的时候会原封不动打包到dist文件夹中。

pubilc/index.html是一个模板文件,作用是生成项目的入口文件,webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html。
src文件夹

1.assets:存放公用的静态资源
2.componets:存放非路由组件(全局组件),其他组件放在views文件夹中,路由组件放入pages文件夹中
3.App.vue:唯一的根组件
4.main js:项目入口文件,最先执行的文件

babel.config.js: 配置文件(babel相关)
package.json: 项目的详细信息记录
package-lock.json: 缓存性文件(各种包的来源)

2、项目配置

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

package.json
    "scripts": {
    "serve": "vue-cli-service serve --open", //--open自动打开
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
    },


//或者在vue.config.js文件中设置
module.exports = {
  open:true
  }

2.2 关闭eslint校验工具(不关闭会烦人的代码规范,不按照规范就会报错)

在根目录中创建vue.config.js文件

module.exports = {
  //关闭eslint
  lintOnSave: false
  }

3、组件页面样式

组件页面的样式使用的是less样式,浏览器不识别该样式,需要下载相关依赖
npm install --save less less-loader@5
如果想让组件识别less样式,则在组件中设置

你可能感兴趣的:(webpack,vue.js,javascript)