# vueTest
**Repository Path**: cason/vuetest
## Basic Information
- **Project Name**: vueTest
- **Description**: vuetest
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-04-21
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# sell笔记 课程笔记与代码放在一起
知识点（理解并运用每一个知识点，而不是走马观花）
> sell app
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
```
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
#### 查看node版本 4.4.5
node -v
#### 安装脚手架
npm install -g vue-cli
#### 初始化
vue init webpack sell
#### 安装依赖
cnpm install
npm run dev
#### .gitkeep表示就算是空目录也提交到git
##### .babelrc babel配置
{
"presets": ["es2015", "stage-2"], //es2015 es6编译成es5，stage-2 预设的两个插件
"plugins": ["transform-runtime"], //其他插件
"comments": false //
}
##### .editorconfig 编辑器配置文件
root = true
[*]
charset = utf-8 编码
indent_style = space 缩进风格
indent_size = 2 缩进空间2个
end_of_line = lf 换行符的风格
insert_final_newline = true
trim_trailing_whitespace = true 自动移除行尾空格
#### .eslintignore 忽略语法检查的目录
##### .eslintrc.js
语法检查规则配置
##### 项目配置文件 package.json
```json
{
"name": "vue-seller", //项目名称
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": { //执行的命令
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"test": ""
},
"dependencies": { //生产环境下的依赖
"babel-runtime": "^6.0.0",
"better-scroll": "^0.1.7",
"mint-ui": "^1.0.2",
"vue": "^1.0.21",
"vue-resource": "^1.0.1",
"vue-router": "^0.7.13"
},
"devDependencies": { //开发环境下编译的依赖
"babel-core": "^6.0.0",
"babel-loader": "^6.2.8",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",
"connect-history-api-fallback": "^1.1.0",
"css-loader": "^0.23.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.4",
"function-bind": "^1.0.2",
"html-webpack-plugin": "^2.8.1",
"http-proxy-middleware": "^0.12.0",
"json-loader": "^0.5.4",
"ora": "^0.2.0",
"shelljs": "^0.6.0",
"stylus": "^0.54.5",
"stylus-loader": "^2.3.1",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.3.0",
"vue-style-loader": "^1.0.0",
"webpack": "^1.12.2",
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0",
"webpack-merge": "^0.8.3"
}
}
```
##第四章
###资源准备
###svg转化为图标字体
https://icomoon.io
IcoMoon App => import Icons => 选择点击小图标 => Generate Font => Preferences配置名称 Download
#####2x和3x图片
物理像素/dips
css18px的图片 2x就是设计图标要=18*2px 3x就是18*3
设计图上36px 在手机上就是就是18px
cnpm install stylus-loader
#####组件的设计原则是就近维护
H:\node\sell\src\components 组件目录
H:\node\sell\src\common 共用文件目录
### zencoding快速编码
div.*2 tab
div.
div#
#####属性
div[v-if]
##### E
元素名称(div, p);
##### E#id
使用id的元素(div#content, p#intro, span#error);
##### E.class
使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
##### E>N
子代元素(div>p, div#footer>p>span);
##### E+N
兄弟元素(h1+p, div#header+div#content+div#footer);
##### E*N
元素倍增(ul#nav>li*5>a);
##### E$*N
条目编号 (ul#nav>li.item-$*5);
正如你能看到的，你已经知道如何使用Zen Coding了：只是些一个简单的仿CSS选择器(呃，“缩写”抱歉)，就像这样…
div#header>img.logo+ul#nav>li*4>a
##第五章 重点
组件拆分
防止缩放
重置css样式
引入reset.css
5-2
5-4
vue默认的选中样式
v-link-active
6-1
vue-resource 处理ajax请求
v-if
设计稿上的所有样式除以二