vue

一、安装
1.全局：npm install -g vue-cli
2.webpack目录初始化: vue init webpack demo(项目名称)
3.依赖安装： npm install less --save
二、目录结构
build config weboack配置相关
node npm安装依赖代码库
src 存放项目源码
static 第三方静态资源

三、编写一个组件的步骤:

1.创建一个.vue文件(文件内分三个部分<template>,<script>,<style>)
2.在<script>里面利用export default{}的语法堂导出vue的各种选项,属性
3.使用的时候在<script>标签里用import方法引入vue文件,在通过Component{ }方法注册组件,以标签的方式输出到html结构中

 

四、

Vue.use(VueResource)

Vue.http.options.emulateJSON = true

五、moke数据

cnpm install body-parser --save

http://localhost:8081/api/getNewsList

1.dev-server.js

var apiServer = express()
var bodyParser = require('body-parser')//返回json数据
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs')

apiRouter.route('/:apiName')    //
.all(function (req, res) {
fs.readFile('./db.json', 'utf8', function (err, data) {   //本地路径 index.html同级 ./db.json
    if (err) throw err
    var data = JSON.parse(data)
    if (data[req.params.apiName]) {
      res.json(data[req.params.apiName])  
    }
    else {
      res.send('no such api name')
    }
    
})
})

apiServer.use('/api', apiRouter);      // 设置地址/api
apiServer.listen(port + 1, function (err) {
if (err) {
    console.log(err)
    return
}
console.log('Listening at http://localhost:' + (port + 1) + '\n')
})

2.config.js

  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
            '/api/': 'http://localhost:8081/',
            '/data': {
                target: 'http://cs.24bao.com.cn',
                changeOrigin:true,
                pathRewrite:{
                    '^/data': ''
                }
            }
        },
    cssSourceMap: false
  }

六、import与export

http://www.cnblogs.com/dupd/p/5951311.html

 

七、vue-resource

http://blog.csdn.net/liuqing_1/article/details/53858447?utm_source=itdadao&utm_medium=referral

this.$http.jsonp(url,{params:{},jsonp:"_callback"})

 

八、 路径配置 less

webpack.base.config

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': resolve('src/components'),
      'base': resolve('src/base')
    }
  },
  module: {
    rules: [
        {
            test: /\.less$/,
            loader: 'style-loader!css-loader!less-loader'
          }
        ]
    }
}