[20190614]webpack+vue学习记录

Vue项目结构与配置详解
本文详细介绍了使用webpack和Vue构建项目时的代码结构和配置流程,包括项目依赖包、配置文件、源码目录等关键组成部分,以及如何安装CLI、创建项目和管理依赖包。

本文记录一些学习webpack+vue相关的知识点,方便以后查阅,添加或修改

1. 初始化vue项目的代码结构

build--项目依赖包配置信息

config--项目配置文件

  dev.env.js--开发环境配置文件

  index.js--基础配置文件

  prod.env.js--线上环境配置文件

mode_module--依赖包文件

src--项目源码

  assets--项目图片资源

  components--项目小组件

  router--项目路由

  App.vue--项目根组件文件

  main.js--项目入口文件

static--静态资源(能被外部直接访问的数据文件)

.babelrc--babel语法解析器语法转换配置文件

.editorconfig--编辑器语法配置文件

.eslintignore--指定哪些文件不要eslint语法检测

.eslintrc.js--eslint语法检测配置文件

.gitignore--指定哪些文件不要git提交

.postcssrc.js--postcss配置文件

index.html--项目首页文件

package-lock.json--依赖包版本信息文件

package--依赖包信息文件

README.md--说明文件

 

2. 安装cli/创建cli项目/安装依赖包

npm install --global vue-cli
vue init webpack projectname
npm install packagename --save

 

3. 目录缩写

将一些常用的目录进行缩写:

打开build文件夹webpack.base.conf.js文件,在项目中使用'~styles'代替'src/assets/styles'

resolve: {
  'styles': resolve('src/assets/styles')    
}

 

转载于:https://www.cnblogs.com/jimfigo/p/11022065.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值