vue-cli

Vue

安装步骤

• 安装node，确保版本在4以上 v4.4.5是稳定版本
• sudo npm install -g vue-cli (win下可以省略sudo)
• vue init webpack sell 使用webpack模板，项目名字叫sell
• project name sell项目名称 ok
• project description项目描述
• Author作者
• Use ESLint to lint your code?代码风格检查器 yes
• Pick an ESLint preset预设 Standard
• Setup unit tests with Karma + Mocha?单元测试 n 忽略
• cd sell
• npm install 安装依赖
• npm run dev 运行

目录介绍

一级目录

• build和config文件夹：webpack配制相关

• node_modules文件夹：npm install 安装的依赖代码库

• src文件夹：存放项目源码，开发所有源码都会放在scr目录下

• static文件夹：存放静态资源的，.gitkeep作用是当这个目录为空也会把这个目录提交到git仓库里

• .babelrc 是babel的一些配制，因为我们的代码都是是es6，二大部分浏览器不能直接支持es6语法，做法是把ES6通过babel编译成ES5 ，

  1. presets表示预设（表示babel转换预先安装的插件）
  2. plugins:配制其他插件（transform-runtime可以把es6的一些方法做转换）
  3. comments:false 表示转换后代码不生成注释

• .editorconfig:编辑器的配制

  1. charset = utf-8 表示编码
  2. indent_style = space 表示缩进风格，基于一个空格做缩进
  3. indent_size = 2 表示缩进大小是2个
  4. end_of_line = lf 表示换行符的风格
  5. insert_final_newline = true 表示当你创建一个文件，自动会在文件末尾插入一个新行
  6. trim_trailing_whitespace = true 表示会自动移出行尾多余空格

• .eslintignore: 忽略语法检查的目录文件

• eslintrc.js :eslint 的配制文件

  1. 可以通过rules 重新定义规则，如果想忽略某些规则可以设置为0
  2. no-debugger 不允许代码中出现debugger，生产环境为0

• .gitigore:git仓库忽略这些文件或目录，不会被提交到git代码里

• index.html 入口HTML文件

• package.json 项目配置文件

• README.md 项目的一些描述文件

webpack

• dev-server.js

  1. path :是nodejs提供的API，表示提供文件路径操作方法
  2. express：是nodejs框架，用他启动webserver
  3. webpack:核心编译工具
  4. config:配制文件，对运行时和开发时的一些配制
  5. proxyMiddleware：http协议代理的中间件，可以代理和转发一些我们需要的转发的API
  6. webpackConfig:是webpack相关配制

• webpack.dev.conf.js

  1. merge：用来合并配制文件
  2. utils：工具方法

• webpack.base.conf.js

  1. projectRpopt:定义当前项目的根目录
  2. modules.exports: webpack基本配制

• 使用webpack的项目 图片尽量用单张图

• icoMoon 制作图标字体工具

关于项目样式

影响css布局的样式——宽、高会触发重绘的不可被弃的——字体、颜色可被弃的