# vue_sell

**Repository Path**: tinygg/vue_sell

## Basic Information

- **Project Name**: vue_sell
- **Description**: No description available
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-03-20
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue课程目标
掌握Vue.js在实战中的运用  
Vue.js框架介绍  
Vue-cli脚手架 搭建基本代码框架  
vue-router 官方插件  
vue-resource Ajax通信  
webpack 构建工具  

es6 + eslint  

工程化、组件化、模块化

MV*(MVC\MVP\MVVM)

MVVM框架(angular.js react.js vue.js)

View 	- 	ViewModel 		-	 Model
视图-DOM		通讯-观察者		数据-js对象


针对具有复杂交互逻辑的前端应用，提供基础的架构抽象通过Ajax数据持久化，保证前端用户体验

数据驱动
##############################
DOM是数据的一种自然映射

传统
数据改变，手动触发DOM改变

Vue.js
数据改变，通过指令驱动DOM变化...
实现了双向绑定

组件化
##############################
扩展HTML元素，封装可重用的代码

组件设计原则
##############################
页面上每个独立的可视、可交互区域视为一个组件
每个组件对应一个工程目录，组件所需要的各种资源在这个目录就近维护
页面不过是组件的容器，组件可以嵌套自由组合形成完整页面


# vue_sell
## 安装nodejs
https://nodejs.org/en/

## 安装cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

## 安装vue-cli
cnpm -g i vue-cli

cnpm i -g eslint

## 使用vue-cli
vue list 查看所有可用模板
vue init webpack sell

```
C:\Users\polo\Workspaces\WS_prj>vue init webpack sell
? Project name sell
? Project description sell app
? Author tinygg@163.com
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (reco
mmended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself
```

## 运行 
cd sell
npm run dev

 DONE  Compiled successfully in 6655ms
 I  Your application is running here: http://localhost:8080

## 项目目录结构
sell/
	build
	config
	node_modules
	src
	static
	package.json
	.babelrc
	.eslintignore
	.eslintrc.js
	index.html
	
build、config目录与webpack有关
node_modules 与nodejs安装组件有关
src 存放源码，开发所有代码都放在这里
static 第三方静态资源
package.json nodejs项目资源依赖清单
.babelrc 做代码转换
.eslintrc.js 代码风格规范
index.html 非常简单, 编译过程中会自动插入这个文件

每个.vue组件分为三个部分 template、script、style

## SVG图片-->fonts
一般是色调单一的图片才使用SVG
使用工具将矢量图转换为图标字体的文件，可以在css中引用这些文件
IcoMoon.io （https://icomoon.io/app/#/select）
上传->选择（定义prefix）->下载zip（fonts/*.eot、*.svg、*.ttf、*.woff, style.css）->使用
Import Icons -> Selection ->Generate ->Preference（Font Name） ->Download

## 目录整理
新建一些目录
src/
    /common
    	/fonts
	/js
	stylus
复制fonts文件夹里面的字体文件到src/common/fonts
复制style.css为icon.styl到src/common/stylus, 同事将css语法改为stylus语法(大括号去掉、分号去掉)，格式化

删除src/assets目录

前后端分离，前后端各司其职，分开开发，然后一起联调，通过ajax获取请求

## 前端开发， moc数据
data.json

新版vue-webpack-template已经删除dev-server.js，改用webpack.dev.conf.js代替，
所以 配置本地访问在webpack.dev.conf.js里配置即可。
```
const portfinder = require('portfinder')

// moc data start
const express = require('express')
const app = express()
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
// moc data end
... ...
    watchOptions: {
      poll: config.dev.poll,
    },
    // moc data start
    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })
      }),
        app.get('/api/goods', (req, res) => {
          res.json({
            errno: 0,
            data: goods
          })
        }),
        app.get('/api/ratings', (req, res) => {
          res.json({
            errno: 0,
            data: ratings
          })
        })
    }
    // moc data end
```

## 运行
npm run dev

## 组件拆分
Reset CSS
/static/css/reset.css (http://cssresert.com)
http://meyerweb.com/eric/tools/css/reset/


安装组件 
cnpm i stylus stylus-loader

## 使用flex布局 【商品】【评论】【商家】
<style lang="stylus" rel="stylesheet/stylus">
  #app
    .tab
      display: flex
      width: 100%
      height: 40px
      line-height: 40px
      .tab-item
        flex: 1
        text-align : center
</style>
生成的代码会自动考虑浏览器的兼容性！！

## 使用vue-router实现:用户点击tab内容改变
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  }

cnpm install

开始使用 
https://router.vuejs.org/zh-cn/essentials/getting-started.html


##解决方案
Q: This dependency was not found: * !!vue-style-loader!css-loader? 
A: cnpm install stylus stylus-loader css-loader style-loader --save-dev