Giter VIP home page Giter VIP logo

cs's Introduction

stepv

vue2-stepv

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

API接口管理

http://192.168.0.10:3000

Git

added 添加
update 修改
fixed 修复

架构

vue 渐进式 JavaScript 框架
vuex 状态管理
vue-router 路由
vue-devtools 调试
axios HTTP请求组件

结构

└── src
    ├── api                                     #API接口
    │   └── user.js                                #用户接口
	├── components                              #组件
	│   └── common                                 #公共组件
	├── config                                  #基本配置
	│   └── index.js                              #配置文件
    ├── images                                 	#图片
	├── pages                                   #页面
	│   └── user                                   #用户页面
	│   	├── detail.vue                        #用户详情页
	│       └── index.vue                         #用户主页
    ├── plugins                                 #第三方资源(主要放置jQuery插件,尽可能使用CDN)
    ├── router                                  #路由
    │   └── index.js                               #配置
    ├── store                                   #vuex状态管理
    │	├── modules                         	   #store模块
    │	│	└── user.js							      #用户模块
    │   ├── action.js                              #配置actions 不是必须的
    │   ├── getters.js                             #配置getters
    │   ├── index.js                               #创建store
    │   ├── mutation-types.js                      #定义常量muations名
    │   └── mutations.js                           #配置mutations
    ├── styles                                 	#样式
    └── utils                                	#公共JS
        └── http.js                                #封装axios(使用参数方式调用)

命名规范

引入大写 import Router from './router'
引入获取指定变量 import {apiUrl} from 'config/index'
Vue文件 user-test.vue
变量驼峰 userName = 'kenung'
尽可能不用 var 使用let const

文件引用

'src': resolve('src'),
'api': resolve('src/api'),
'components': resolve('src/components'),
'config': resolve('src/config'),
'images': resolve('src/images'),
'plugins': resolve('src/plugins'),
'styles': resolve('src/styles'),
'utils': resolve('src/utils'),
//使用
import {routerMode} from 'config/index'

关于vuex

https://www.jianshu.com/p/1d8f535e96ba
https://segmentfault.com/a/1190000009404727
https://segmentfault.com/q/1010000009940950/a-1020000009942755
State
Getter
Mutation
Action
Module

cs's People

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.