npm install vue-cli -g

npm install -g @vue/cli

vue init webpack Vue-Project

vue create <project-name>

 cd Vue-Project  npm install

//模擬數(shù)據(jù)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: {},// 生產(chǎn)環(huán)境是否生成 sourceMap 文件productionSourceMap: true,  // css相關(guān)配置  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 插件相關(guān)配置  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa  pwa: {},// webpack-dev-server 相關(guān)配置devServer: {//模擬數(shù)據(jù)開始  before(app) {    app.get('/api/seller', (req, res) => {      res.json({        // 這里是你的json內(nèi)容        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 //注意使用箭頭函數(shù)才可用this不然需要在函數(shù)外先定義變量把this賦值給變量     console.log(this.itemlis)   },function(err){     console.log(err)   })  },  //組件里面必須用函數(shù)，return方式獲取data data () {  return {   msg: 'Welcome to Your Vue.js App',   itemlis:[],  } }}</script>