码迷,mamicode.com
首页 > Web开发 > 详细

[20190614]webpack+vue学习记录

时间:2019-06-14 10:50:54      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:pre   resolve   Edito   div   css   ati   ssr   htm   set   

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

 

[20190614]webpack+vue学习记录

标签:pre   resolve   Edito   div   css   ati   ssr   htm   set   

原文地址:https://www.cnblogs.com/jimfigo/p/11022065.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!