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

2024-12-06 16:27:25

最近在研究学习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数据的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

详解vue-cli3多环境打包配置

最近下载了vue-cli3,研究了下vue-cli3下多环境的配置. 首先,安装vue-cli3. npm install -g @vue/cli 安装好之后的项目是这样的,见下图: 相比较vue-cli2的项目,缺少了build和config目录,另外static目录也没了,多了个public目录. 配置文件需要自己写一个vue.config.js,可以参考官方文档文档写,网址 https://cli.vuejs.org/zh/config/ 现在说重点,怎么配置多环境.打开package.j
vue-cli3.0 环境变量与模式配置方法

vue-cli3.0移除了配置文件目录: config和build文件夹.可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢? 为什么需要配置环境变量和模式呢? 所有方法肯定是来源于现实的需求.在一个产品的前端开发过程中,一般来说会经历本地开发.测试脚本.开发自测.测试环境.预上线环境,然后才能正式的发布.对应每一个环境可能都会有所差异,比如说服务器地址.接口地址.websorket地址-- 等等.在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来
vue-cli项目配置多环境的详细操作过程

vue-cli 默认只提供了 dev 和 prod 两种环境.但其实正真的开发流程可能还会多一个 sit 或者 stage 环境, 就是所谓的测试环境和预发布环境.所以我们就要简单的修改一下代码.其实很简单就是设置不同的环境变量详细操作过程 1.在 package.json 中添加 test 命令 "scripts": { "dev": "cross-env NODE_ENV=online node build/dev-server.js --host
通过vue-cli来学习修改Webpack多环境配置和发布问题

Vue之所以现在如此之火热,一部分也得益于有官方的脚手架生成工具Vue-cli,大大简化了初学者环境搭建的成本,但是实际业务中我们往往需要实现其他的功能来对webpack进行改造,本文将会根据一些实际的业务需求,先学习vue-cli生成的模版,然后在进行相关修改. Vue-cli生成模版文件目录 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.j
vue-cli3.0如何使用CDN区分开发、生产、预发布环境

前言:上一篇记录文vue-cli 3.0 build包太大导致首屏过长的解决方案中提到了CDN优化,之前是直接在html中手动注入JS,也没有对开发和生产模式进行区分,因为是使用收费的CDN,所以在开发模式会遇到无权使用CDN的问题.要是使用CDN写死在html中,不同环境需要手动的切换CDN,那么早晚有一天会搞乱,下面就说说怎么在vue-cli 3.0 中根据不同环境动态注入CDN. 1. 修改public/index.html 通过htmlwebpackplugin动态注入脚本和样式,ind
vue-cli3环境变量与分环境打包的方法示例

第一步 : 了解环境变量概念我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略环境变量文件只包含环境变量的"键=值"对: FOO=bar VUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用除
vue新vue-cli3环境配置和模拟json数据的实例

最近在研究学习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-c
vue配置请求本地json数据的方法

本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下: 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 const express = require('express') const app = express() const appData = require('../data.json') // 加载本地json文件 const seller = appDa
vue父组件向子组件传递多个数据的实例

在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况: 第一种:静态数据传递:传递一个字符串第二种:动态数据传递:绑定一个字符串传过去,一个数组,或者是一个对象传递过去这里主要看一下动态的数据绑定.比如你可以将你所有需要的数据都封装在一个数组,或者是一个对象里面然后传递给子组件. 但是有一个问题,假如你有两个数据,一个对象,一个数组,需要同时从父组件传递给子组件,你会怎么办? 这里就通过一个例子来说明一下: 子组件
Json数据解析模拟美团界面显示

<?xml version="." encoding="UTF-"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="dp" android:background=&qu
浅析vue给不同环境配置不同打包命令

第1步:安装cross-env npm i --save-dev cross-env 第2步:修改各环境下的参数在config/目录下添加test.env.js.pre.env.js. 修改prod.env.js里的内容,修改后的内容如下: 'use strict' module.exports = { NODE_ENV: '"production"', EVN_CONFIG:'"prod"', API_ROOT:'"/apis/v1"' }
Vue Cli3 打包配置并自动忽略console.log语句的方法

下载插件 npm i -D uglifyjs-webpack-plugin 在 vue.config.js 引入使用 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { configureWebpack: { plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress: { drop_console: true, }, }, }), ],
vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

参考文档 https://cli.vuejs.org/zh/ 1.安装 npm install -g @vue/cli 2.检查安装 vue -V 3.创建项目 vue create project_name 出现下图信息 4.上图两种选择方式,第一种是默认的,第二种自己选择配置这里一般选择第二种自己配置,点击回车键后出现下图信息 5.在上图中选择你需要的模块,上下移动,空格进行确定,下图是测试选择的 6.选好后,敲Enter键,接着选择 7.选择完毕后,一路Enter,到下图 8.模板创建
基于vue cli 通过命令行传参实现多环境配置

大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run serve //默认本地开发环境 npm run serve -sit //本地开发中使用sit环境 npm run serve -uat //本地开发中使用uat环境 npm run build //默认打包后使用生产环境 npm run build -local //打包后使用本地环境 npm
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)

本项目是vue-cli搭建的项目框架,引入axios用于数据请求.配置不同的接口地址,(首先确保已经集成了axios,如对集成axios有疑问的道友,可参看我之间的一篇vue-cli 引入axios)操作如下一.设置不同的接口地址找到如下文件 /config/dev.env.js /config/prod.env.js 之后增加接口地址域名配置,增加后的文件内容如下二.在自己重新封装的axios文件中(api/api.js),将配置好的接口地址作为baseURL拼接到接口路径中详细的ap
vue开发环境配置跨域的方法步骤

本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问 production:产品生产环境 development:开发开发环境 1.开发环境设置跨域使用工具: vue-cli自带的配置配置目录 /config/index.js //自行复制黏贴 proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后台api changeOrigin: true, //是否跨域 // s

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

相关推荐

随机推荐