'vue-cli'

发表于

Vue-cli是Vue的脚手架工具

帮助我们写好Vue.js基础代码的工具.

  1. 目录结构
  2. 本地调试
  3. 代码部署
  4. 热加载
  5. 单元测试
1
npm install -g cue-cli

webpack 环境搭建

  1. vue init webpack sell
  2. cd sell
  3. npm install
  4. npm start

目录文件

  1. build
  2. config
  3. node_modules 依赖包
  4. src源码
    • assets
    • components
  5. static 静态文件
  6. .babelrc babel编译配置
    • “preset” 预设插件
    • “plugins” 插件
    • “comments”:false false表示编译后代码不包含注释
  7. editorconfig
    • charset 编码
    • indent_style 缩进风格
    • indent_size
    • end_of_line 换行符
    • inset_final_newline
    • trim_trailing_whitespace true自动移除行尾多余空格
  8. .eslintignore
  9. .eslintrc.js eslint的配置文件
  10. .gitignore git忽略文件
  11. index.html 主html
  12. package.json 项目描述
    • “script” 配置脚本命令
  13. README.md

Webpack 打包

1
2
3
4
resolve = {
    extensions:['','js','.vue']//自动识别后缀
}
slias //模板中用到fequire时 通过设置别名来缩短路径长度
  • module
    • preLoader
    • loaders
      • include 只针对指定目录编译
      • exclude 编译时不包含目录
      • url-loader query{limit 限制大小(超过后形成一个独立文件)}
    • eslint formatter 查看eslink错误原因
    • vue:{loader:}