[20190614]webpack+vue学习记录

Posted 2022-01-07 jimfigo

本文记录一些学习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‘)