精华内容
下载资源
问答
  • spring boot 与 vue 环境配置

    千次阅读 2019-03-22 11:02:16
    spring boot 与 vue 环境配置 node.js下载 下载地址 版本查看 vue 介绍 vue-cli脚手架 项目创建 依赖安装 运行 Spring boot 介绍 eclipse创建spring boot 项目 通过官网创建spring boot项目 导入...

    目录

    spring boot  与 vue 环境配置

    node.js下载

    下载地址

    版本查看

    vue

    介绍

    vue-cli脚手架

    项目创建

    依赖安装

    运行

    Spring boot

    介绍

    eclipse创建spring boot 项目

    通过官网创建spring boot项目

    导入eclipse

    修改项目端口

    修改pom.xml 文件

    编写一个测试controller

    启动项目


    spring boot  与 vue 环境配置

    node.js下载

    下载地址

    在搭建vue的开发环境之前,一定一定要先下载node.js,,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64 ,网址:http://nodejs.cn;

    版本查看

    下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号,

     

    这样就已经是安装成功了,由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用

    淘宝的cnpm命令管理工具可以代替默认的npm管理工具:$ npm install -g cnpm --registry=https://registry.npm.taobao.org;

    vue

    介绍

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    vue-cli脚手架

    淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli  回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;

    项目创建

    然后我们开始创建新的项目输入命令:vue init webpack my-project  回车,my-project是我自己的文件夹的名字,是基于webpack的项目,输入之后就一直回车,直到出现是否要安装vue-route,

    这个我们在项目要用到,所以就输入y 回车

    下面会出现是否需要js语法检测,这个我们暂时用不到,就可以直接输入no,后面的都可以直接输入no,都是我们暂时用不到的

    依赖安装

    文件夹已经下载好了,现在就可以进入文件夹,输入: cd my-project 回车,因为各个模板之间都是相互依赖的,所以现在我们要安装依赖,

    输入命令:cnpm install

    运行

    已经安装好之后,现在要来测试一下我们下载好的模板能不能正常的运行,在命令行输入:cnpm run dev 回车即可,

    8080是默认的端口,要访问的话,直接在浏览器输入localhost:8080就可以打开默认的模板了;


    Spring boot

    介绍

    Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。

      该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。  

      通过这种方式,Spring Boot 致力于在蓬勃发展的快速应用开发领域(rapidapplication development)成为领导者。

    eclipse创建spring boot 项目

    通过官网创建spring boot项目

    访问http://start.spring.io/ ,选择构建工具Maven Project、Spring Boot版本2.1.3以及一些工程基本信息,点击“java version.”java版本选择1.8,点击Generate Project下载项目压缩包

    导入eclipse

    解压后,使用eclipse,Import -> Existing Maven Projects -> Next ->选择解压后的文件夹-> Finsh

    修改项目端口

    默认项目端口为8080,避免与vue项目端口冲突。修改项目端口,在application.properties中添加 server.port=8081

    修改pom.xml 文件

    添加web的starter

    <!-- web -->
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-web</artifactId>
    		</dependency>

    编写一个测试controller

    启动项目

    下面点击项目run as——>Spring Boot App,在浏览器中输入localhost:8081/hello

     

     

    展开全文
  • vue 环境配置(使用cross-env配置)

    千次阅读 2020-04-15 16:35:34
    vue 环境配置(使用cross-env配置) 通过定义不同的打包命令, 更改项目环境变量 。 1、下载 cross-even(什么是’cross-even’) npm install cross-env --save-dev 2、package.json 文件 查询 scripts,在其中...

    vue 环境配置(使用cross-env配置)

    通过定义不同的打包命令, 更改项目环境变量 。

    1、下载 cross-even(什么是’cross-even’)

    npm install cross-env --save-dev
    

    2、package.json 文件 查询 scripts,在其中加入如下代码:(其为不同环境的打包命令,可自定义)。

        "build:qa": "cross-env NODE_ENV=production env_config=test node build/build.js",
        "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
        "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
    

    3、全局变量 process 接收打包时改变的环境变量。

    3.1、在conifg文件中建立N(需要的n个环境)个文件夹(例如:test.env.js):【为了环境变量模块化配置】

    'use strict'
    const merge = require('webpack-merge')
    const testEnv = require('./test.env')
    
    module.exports = merge(testEnv, {
      NODE_ENV: '"testing"',
      EVN_CONFIG: '"test"',
      BASE_API:'"https://www.baidu.com/"',
    })
    

    3.2 在config文件的 index.js 中 build模块 添加如下:

        prodEnv: require('./prod.env'),
        preEnv: require('./pre.env'),
        testEnv: require('./test.env'),
    

    3.3 在build文件的 webpack.prod.conf文件中修改:【动态获取】

    // const env = require('../config/prod.env')  //原来的
    const env = config.build[process.env.env_config + 'Env']   //现在动态的
    

    3.4 在build文件的 webpack.prod.conf文件中修改:【build时候的 log】

    let spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config + ' mode...')
    spinner.start()
    

    3.5 本地测试打包:在config文件的 index.js 中 build模块 修改如下:

     assetsPublicPath: './',
    

    4、使用:打包后全局可使用 process.env。

    展开全文
  • vue环境配置及vscode调试

    千次阅读 2019-09-13 15:50:29
    本教程关于vue 在vscode 中的调试及开发。...mac安装 vue开发环境 以下展示 shell内容的详细信息。 #!/bin/bash -v #set -v echo "vrew 版本." brew -v echo "安装node.js" brew install nodejs echo...
    • 本教程关于vue 在vscode 中的调试及开发。使用mac系统完成配置。

    • 配置脚本在 vue_install.sh

    详细说明链接

    mac安装 vue开发环境

    以下展示 shell内容的详细信息。

    
    #!/bin/bash -v
    #set -v 
    
    echo  "vrew 版本."
    brew -v 
    
    echo "安装node.js"
    brew install nodejs
    
    echo "查看node 版本"
    node -v
    
    echo "获取nodejs模块安装目录访问权限 (必须执行)"
    sudo chmod -R 777 /usr/local/lib/node_modules/
    
    echo "安装 淘宝镜像 (cnpm)"
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    echo  "安装webpack"
    sudo cnpm install webpack-dev-server -g 
    sudo cnpm install webpack -g
    sudo cnpm install webpack-dev-server -g 
    
    echo "安装vue脚手架"
    sudo cnpm install -g vue-cli
    
    echo "到目的目录"
    cd ./src
    
    echo "安装项目依赖"
    cnpm install
    
    echo "安装 vue 路由模块vue-router和网络请求模块vue-resource"
    cnpm install vue-router vue-resource --save
    
    echo "启动项目:在项目目录中使用,npm run dev 或 cnpm run dev"
    
    echo "报错可能需要执行(npm install 或 npm install -g @vue/cli@latest)"
    
    
    • 详细请见注解

    vscode vue 调试 (chrome 浏览器)

    1. 安装chrome 到系统软件目录(必须系统软件目录))

    2. vscode 搜索chrome debug插件
      在这里插入图片描述

    3. 配置debug信息
      在这里插入图片描述

    • 配置调试信息
      在这里插入图片描述
      注意:这里需要配置的url需要与
    • demo 端口需要一一映射
      在这里插入图片描述
    1. 调试开始
    • 启动vue项目
     npm run dev
    
    • 启动 vscode 调试

    在这里插入图片描述

    1. 打包发布
    npm run build:prod
    

    喜欢请给星


    展开全文
  • vue+cesium初探(一)之vue环境配置

    千次阅读 2020-08-10 09:44:47
    1、基础环境 ...4、配置vue.config.js 在项目目录下新建vue.config.js,配置如下 const CopyWebpackPlugin = require('copy-webpack-plugin') const webpack = require('webpack') const path = requi...

    1、基础环境

        

    2、创建项目

     

    选择第三项自己配置

    按上下移动,空格键选择,回车键确定

    后面就按自己喜好去配,不懂可以摆渡

    3、安装cesium依赖

    4、配置vue.config.js

    在项目目录下新建vue.config.js,配置如下

    const CopyWebpackPlugin = require('copy-webpack-plugin')
    const webpack = require('webpack')
    const path = require('path')
    
    let cesiumSource = './node_modules/cesium/Source'
    let cesiumWorkers = '../Build/Cesium/Workers'
    
    module.exports = {
      // 基本路径  3.6之前的版本时 baseUrl
      publicPath: "./",
      // 输出文件目录
      outputDir: "dist",
      // eslint-loader 是否在保存的时候检查
      lintOnSave: false,
      // webpack-dev-server 相关配置
      devServer: {
        open: process.platform === "darwin",
        host: "0.0.0.0",
        port: 8088,
        https: false,
        hotOnly: false
      },
      configureWebpack: {
        output: {
          sourcePrefix: ' '
        },
        amd: {
          toUrlUndefined: true
        },
        resolve: {
          alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': path.resolve('src'),
            'cesium': path.resolve(__dirname, cesiumSource)
          }
        },
        plugins: [
          new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
          new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
          new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
          new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
          new webpack.DefinePlugin({
            CESIUM_BASE_URL: JSON.stringify('./')
          })
        ],
        module: {
          unknownContextCritical: /^.\/.*$/,
          unknownContextCritical: false
        }
      }
    };

    5、配置main.js全局引入cesium相关文件

    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    import "./plugins/element.js";
    
    Vue.config.productionTip = false;
    
    //引入cesium相关文件
    var cesium = require('cesium/Cesium');
    var widgets= require('cesium/Widgets/widgets.css');
    
    Vue.prototype.cesium = cesium
    Vue.prototype.widgets = widgets
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");
    

    6、修改Hone.vue

    <template>
      <div id="container" class="box">
        <div id="cesiumContainer"></div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Home',
      mounted(){
        this.init()
      },
      methods: {
        init() {
          let Cesium = this.cesium
          let viewer = new Cesium.Viewer('cesiumContainer');
          viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权
        }
      }
    };
    </script>
    
    <style lang='scss' scoped>
    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .box {
      height: 100%;
    } 
    </style>
    

    7、修改App.vue

    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <style lang="scss">
    </style>
    

    8、启动项目

    npm run serve

    运行效果

     

    展开全文
  • 1.安装nodejshttps://nodejs.org/en/download/ ,配置一下淘宝镜像路径,以防止下面构建vue出错 参考这篇文章https://blog.csdn.net/github_38313789/article/details/80625820 2.安装成功提示 3. 用vue-cli...
  • Electron-vue 项目构建过程 1. 搭建Electron-vue框架,参照网址:https://electron.org.cn/ 2. 执行npm install,npm 在国内比较慢,所以采用淘宝镜像代理,执行以下命令: 安装cnpm:$ npm install -g ...
  • 前提条件:node.js 、vue-cli、webpack安装好,配置好淘宝cnpm源。 本来执行vue init webpack projectName 一路配置,最后npm run dev 就配置完了。 但是,天公不作美。总要出点幺蛾子。这不我这就出了 报错 : ...
  • Vue安装与环境配置

    万次阅读 2019-10-08 17:49:52
    vue 环境配置 1.node
  • sop-vue
  • vue 3.0 环境配置

    千次阅读 2019-02-21 15:55:16
    vue-cli3.0 环境变量与模式 vue-cli 环境变量  读完需要 8 分钟 vue-cli3.0移除了配置文件目录: config和build文件夹。可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢? 为...
  • vue路由配置vue子路由配置

    千次阅读 2019-10-05 16:16:45
    上一篇关于vue环境配置已经写好了!按照操作就行了! 现在一个项目已经部署完成,接下来我们从路由开始! 还记得在初始化项目的时候,有提示是否需要安装vue-router,对没错,vue中路由全靠它! 首先找到路由...
  • vue无效命令和配置vue环境变量

    千次阅读 2019-05-09 14:33:09
    在安装好node.js和vue-cli之后,如果输入vue报如下错误,则需要配置vue环境变量 配置环境变量 标题配置好之后,再次输入vue命令就好了 标题
  • Vue-cli环境配置

    2021-06-22 15:22:27
    NodeJS环境配置Vue创建启动、VSCode开发使用
  • 【Vue】MAC配置Vue环境并创建Vue项目

    千次阅读 2020-07-28 16:01:39
    1、先安装Vue npm install -g @vue/cli 2、创建项目 vue create hello-world 3、启动项目 npm run serve
  • vue相关配置文件详解及多环境配置

    千次阅读 多人点赞 2020-05-15 14:27:35
    1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含... "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsan@163.com>", "description": "sop-vue", "k
  • vue环境配置

    千次阅读 2018-05-24 17:26:46
    配置环境变量 1.首先下载Node.js安装包(msi) 这里根据自己的系统去node官网http://nodejs.cn/download 下载相应的msi包 =>双击运行 (改变安装路径可以放在自己理想的盘符)=>猛点下一步。 2.安装后,打开运行...
  • vue项目配置环境变量

    千次阅读 2020-06-23 14:47:56
    需求: 前后端分离的项目中,前端会有很多环境:本地开发,测试环境,预发布环境,正式上线环境等等,我们的项目有3套基本相同的项目,意思是有12个以上环境,当每个环境都需要打包的时候,手动修改配置就很繁琐而且...
  • vue多种环境配置文件配置

    千次阅读 2020-09-20 17:11:14
    使用如下 在package.json新增命令脚本 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", ... "build:alpha": "vue-cli-service build.
  • Vue配置环境

    千次阅读 2019-03-28 14:00:48
    比如有开发环境、测试环境、生产环境等,他们的接口访问地址可能会不一样,比如测试环境可能是http://test*,生产是http://*product/,那么在vue中发送请求已经写好了访问地址,是不是要根据不同环境而在文件中修改...
  • vue3.0环境变量配置.md

    2020-04-08 12:51:00
    vue3.0环境变量配置大致思路: 1,创建修改相关配置文件(Ctrl + C V即可) 2,封装 axios(根据配置文件,首先判断当前环境,获取对应环境的数据库地址作为当前环境...4,使用插件对代码进行测试判断环境配置是否成功
  • 前后端分离之Vue(一)环境配置

    万次阅读 多人点赞 2018-03-13 16:46:39
    Vue环境配置前言:之前开发过微信小程序,感觉前后端分离的开发非常舒服,在线学习了下Vue这个前端框架,感觉与小程序的开发类似。动手搭建下前后端分离的项目,做个简单的Demo,体会下前后端分离的开发。写下这个...
  • Vue安装及环境配置、开发工具

    万次阅读 多人点赞 2020-09-29 17:06:08
    node.js环境配置4. 配置淘宝镜像源二、使用步骤1.引入库2.读入数据总结 前言 vue前端框架的环境搭建 一、node.js安装和配置 1. 下载安装node.js 官网下载最新版本:https://nodejs.org/en/download/ 可以下载...
  • Vue环境安装与配置

    千次阅读 2019-12-02 16:28:17
    C:\Users\a>"node" "C:\Users\a\AppData\Roaming\npm\\node_modules\vue-cli\bin\vue" Usage: vue <command> [options] Options:  -V, --version output the version number  -h, --help output usage ...
  • 在用vue框架时,经常用到两种环境,一种是开发环境,就是本地开发时的环境,一种是生产环境,就是要发布到线上的环境。 平时开发是用生产环境的,如果发布到线上时,需要切换环境为线上。如果人为去切换也是可以的,...
  • vue配置开发环境、测试环境、生产环境

    万次阅读 多人点赞 2020-03-10 11:35:51
    前言:开发过程、测试过程、生产过程使用的接口地址不能,还有执行的操作可能也不一样,也就需要实现配置好开发环境、测试环境、生产环境,需要什么环境下的配置直接使用即可。 1、根目录下新建文件:.env....
  • VSCode配置Vue脚手架环境

    千次阅读 2020-11-10 12:22:56
    开始配置电脑node环境配置VUE 脚手架环境以及配置VUE项目VSCode 配置 配置电脑node环境 前往 node.js 安装 电脑对应版本的node Node.js 下载 长期支持版,用的人多,应该稳定吧 安装好后 ,windows,进入cmd 输入 ...
  • (一)vue开发环境配置及idea集成vue

    万次阅读 多人点赞 2018-11-28 14:41:23
    以前的工作主要侧重后端的业务逻辑开发,再加上对css,js莫名的不喜欢。所以很少去接触,以前买了本node.js,看起来也是不知道...IntelliJ IDEA配置VUE开发环境 项目导入idea 项目发布  vue开发环境搭建 安装no...
  • vue项目配置多套打包环境变量

    千次阅读 2020-11-20 14:12:11
    下面介绍如何结合vue-cli配置多套环境变量 版本: 当前vue-cli版本为4.54 目的: 规范项目开发流程,降低上线心智负担 例如配置两套环境,一套生产环境,一套开发环境。 开发环境 1.首先,在项目根目录新建文件名为....
  • vue环境变量配置--windows环境

    千次阅读 2020-09-12 22:15:58
    Node.js环境变量配置 1.首先在node.js的安装目录新建两个文件夹node_global和node_cache 2.创建完两个文件夹后,在cmd窗口中输入以下命令(两个路径即是两个文件夹的路径): npm config set prefix "D:\software\...
  • 搭建 vue 开发环境: node.js安装+vue脚手架配置

    万次阅读 多人点赞 2018-08-20 17:56:06
    第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装 1.2 如果本机已经安装node的运行换,请更新至最新的node 版本 下载地址:https://nodejs.org/en/ 或者 http://nodejs.cn/   ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,706
精华内容 29,082
关键字:

vue环境怎么配置

vue 订阅