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


Posted in Javascript onSeptember 19, 2018

最近在研究学习vue,发现环境配置特麻烦,就是跟着文档步骤一步一步来,也会遇到各种想不到的坑,vue-cli3的配置比老的简洁了很多,与以往的配置也有所不同:

1、安装步骤以前是

npm install vue-cli -g

现在是:

npm install -g @vue/cli

2、vue-cli2 新建项目

vue init webpack Vue-Project

vuecli3新建项目,在你创建后会有一个保存当前配置的功能

vue create <project-name>

vue-cli2进入到项目,安装依赖包

cd Vue-Project
  npm install

运行项目

vue-cli2 npm run dev

vue-cli3 npm run serve

vue-cli3 的vue.config.js

//模拟数据
const express = require('express')
const app = express()
var appData = require('./src/data/goodlist.json')
var seller = appData
var 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 cores
parallel: 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: {
  // ...
}
}

json代码

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

获取数据输出vue文件

<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>

以上这篇vue新vue-cli3环境配置和模拟json数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
用原生js做单页应用
Jan 17 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
详解JavaScript的this指向和绑定
Sep 08 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 #Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 #Javascript
vue.extend与vue.component的区别和联系
Sep 19 #Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 #Javascript
自己动手封装一个React Native多级联动
Sep 19 #Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 #Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 #Javascript
You might like
截获网站title标签之家内容的例子
2006/10/09 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
python魔法方法-自定义序列详解
2016/07/21 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
用python批量下载apk
2020/12/29 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
国家助学金获奖感言
2014/01/31 职场文书
体育比赛口号
2014/06/09 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
老兵退伍感言
2015/08/03 职场文书
关于远足的感想
2015/08/10 职场文书
同学聚会开幕词
2019/04/02 职场文书
js不常见操作运算符总结
2021/11/20 Javascript