vue新vue-cli3环境配置和模拟json数据的实例

npm install vue-cli -g

npm install -g @vue/cli

vue init webpack Vue-Project

vue create <project-name>

 cd Vue-Project  npm install

//模拟数据const express = require('express')const app = express()var appData = require('./src/data/goodlist.json')var seller = appDatavar apiRoutes = express.Router();app.use('/api',apiRoutes)module.exports = {  // 基本路径  baseUrl: '/',  // 输出文件目录  outputDir: 'dist',  // eslint-loader 是否在保存的时候检查  lintOnSave: true,  // use the full build with in-browser compiler?  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only  runtimeCompiler: true,  // webpack配置  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md  chainWebpack: () => {},  configureWebpack: () => {},// vue-loader 配置项// https://vue-loader.vuejs.org/en/options.html//vueLoader: {},// 生产环境是否生成 sourceMap 文件productionSourceMap: true,  // css相关配置  css: {  // 是否使用css分离插件 ExtractTextPlugin  extract: true,    // 开启 CSS source maps?    sourceMap: false,    // css预设器配置项    loaderOptions: {},  // 启用 CSS modules for all css / pre-processor files.  modules: false},// use thread-loader for babel & TS in production build// enabled by default if the machine has more than 1 coresparallel: require('os').cpus().length > 1,  // 是否启用dll  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode  // PWA 插件相关配置  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa  pwa: {},// webpack-dev-server 相关配置devServer: {//模拟数据开始  before(app) {    app.get('/api/seller', (req, res) => {      res.json({        // 这里是你的json内容        errno: 0,        data: seller      })    })  },  open: process.platform === 'darwin',    host: '0.0.0.0',    port: 8080,    https: false,    hotOnly: false,    proxy: null// 设置代理},// 第三方插件配置pluginOptions: {  // ...}}

{ "list": [  {   "title": "name1",   "id": "0"  },  {   "title": "name2",   "id": "1"  },  {   "title": "name3",   "id": "2"  } ]}

<template> <div>  <ul>     <li v-for="item in itemlis">{{ item.title }}</li>   </ul> </div></template><script>import css from '../assets/css/base.css'import Vue from'vue'import VueResource from 'vue-resource'Vue.use(VueResource)export default { name: 'HelloWorld',  created:function(){   this.$http.get('api/seller').then((res)=>{     var arrJson=JSON.parse(res.bodyText)     this.itemlis=arrJson.data.list //注意使用箭头函数才可用this不然需要在函数外先定义变量把this赋值给变量     console.log(this.itemlis)   },function(err){     console.log(err)   })  },  //组件里面必须用函数，return方式获取data data () {  return {   msg: 'Welcome to Your Vue.js App',   itemlis:[],  } }}</script>