vue new vue-cli3 environment configuration and examples of simulated json data

Recently, I was studying vue and found that the environment configuration was very troublesome. I followed the document step by step and encountered various unexpected pitfalls. The configuration of vue-cli3 is much simpler than the old ones, and is also different from the previous configuration:

1. The installation steps were

npm install vue-cli -g

Now it is:

npm install -g @vue/cli

2. vue-cli2 new project

vue init webpack Vue-Project

Create a new project in vuecli3. After you create it, there will be a function to save the current configuration.

vue create <project-name>

vue-cli2 enters the project and installs the dependency package

 cd Vue-Project
  npm install

Run the project

vue-cli2 npm run dev

vue-cli3 npm run serve

vue-cli3's

//Simulation dataconst express = require('express')
const app = express()
var appData = require('./src/data/')
var seller = appData
var apiRoutes = ();
('/api',apiRoutes)

 = {
  // Basic path  baseUrl: '/',
  // Output file directory  outputDir: 'dist',
  // Whether eslint-loader is checked when saving  lintOnSave: true,
  // use the full build with in-browser compiler?
  // /v2/guide/#Runtime-Compiler-vs-Runtime-only
  runtimeCompiler: true,
  // webpack configuration  // see /vuejs/vue-cli/blob/dev/docs/
  chainWebpack: () =&gt; {},
  configureWebpack: () =&gt; {},
// vue-loader configuration item// /en/
//vueLoader: {},
// Whether the production environment generates the sourceMap fileproductionSourceMap: true,
  // css related configuration  css: {
  // Whether to use css separating plugin ExtractTextPlugin  extract: true,
    // Turn on CSS source maps?    sourceMap: false,
    // css presetter configuration item    loaderOptions: {},
  // Enable CSS modules for all css/pre-processor files.  modules: false
},
// use thread-loader for babel &amp; TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length &gt; 1,
  // Whether to enable dll  // See /vuejs/vue-cli/blob/dev/docs/#dll-mode

  // PWA plug-in related configuration  // see /vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
// webpack-dev-server related configurationdevServer: {
//Simulation data starts  before(app) {
    ('/api/seller', (req, res) =&gt; {
      ({
        // Here is your json content        errno: 0,
        data: seller
      })
    })
  },

  open:  === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null// Set up a proxy
},
// Third-party plug-in configurationpluginOptions: {
  // ...
}
}

json code

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

Get data output vue file

&lt;template&gt;
 &lt;div&gt;
  &lt;ul&gt;
     &lt;li v-for="item in itemlis"&gt;{{  }}&lt;/li&gt;
   &lt;/ul&gt;
 &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import css from '../assets/css/'
import Vue from'vue'
import VueResource from 'vue-resource'

(VueResource)
export default {
 name: 'HelloWorld',

  created:function(){
   this.$('api/seller').then((res)=&gt;{
     var arrJson=()
     = //Note that using arrow functions can be used this, otherwise you need to define variables outside the function and assign this to the variable     ()
   },function(err){
     (err)
   })
  },
  //The component must use functions and return to obtain data data () {
  return {
   msg: 'Welcome to Your  App',
   itemlis:[],
  }
 }
}
&lt;/script&gt;

The above example of vue new vue-cli3 environment configuration and simulated json data is all the content I share with you. I hope you can give you a reference and I hope you can support me more.