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 相关文章推荐
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
搭建vue开发环境
Jul 19 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
微信小程序实现锚点跳转
Nov 23 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php模板中出现空行解决方法
2011/03/08 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
JavaScript 乱码问题
2009/08/06 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
Python操作Excel的学习笔记
2021/02/18 Python
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
大学军训的体会
2014/11/08 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
python实现Nao机器人的单目测距
2021/09/04 Python
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA