1、安装npm(安装node自带npm),npm安装成功测试

2、安装cnpm,也可以装nvm-windows

步骤1,打开user/admin/.npmrc,输入,也可以用命令

步骤2,输入npm install -g cnpm --registry=https://registry.npm.taobao.org

步骤3,把安装cnpm路径(存在cnpm.cmd)放到PATH环境里,就可以了。

安装成功测试

3、在当前自己的项目,装vue架手架,在cmd输入cnpm install -g vue-cli

4、在当前自己的项目,安装webpack,命令vue init webpack my-project

5、安装Vue 依赖,cnpm install

完成安装,运行,npm run dev,自动打开,端口8080

部署到后端(和后端放一起,可以选择nginx,前后端分离,可以选择跨域访问接口,访问后端。)

然后,配置nginx监听80端口, location/webapp,alias 到 /webapp,重启nginx

location /static {
  alias /webapp;
}

浏览器访问http://xxxxxxxx/index.html即可

webpack-vue搭建,部署到后端的更多相关文章

  1. 二、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  2. 一、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  3. Webpack + vue 搭建

    前言: 为何使用webpack? 为何相对于gulp&grunt更有优势 WebPack(前往官网)可以看做是模块打包机:直接分析项目结构,找到JavaScript模块以及其它的一些浏览器不能 ...

  4. [Vue] karme/jasmine/webpack/vue搭建测试环境

    karma 和 jasmine karma 是 google 开源的一个基于 Node.js 的 JavaScript 前端测试运行框架,前身叫 Testacular. jasmine 是一个 jav ...

  5. webpack+vue搭建vue项目

    阅读地址: https://www.jianshu.com/p/23beadfa4aa5 源码地址:https://github.com/Ezoio/IMI-SOURCE-CODE

  6. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  7. vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)

    前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...

  8. vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码

    webpack+vue 2.0打包发布之后,将发布的文件部署到服务器中之后,浏览器中访问的时候会出现一个webpack文件夹,里边会显示vue文件源码 如果不想让vue源文件显示出来,可以在confi ...

  9. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

随机推荐

  1. OpenCV阶段总结扩充。

    Mat类型简单介绍 /* cv::Mat类是用于保存图像以及其他矩阵的数据结构.默认情况下,其尺寸为0,我们也可以设置其初始尺寸,比如定义一个Mat类的对象,就要写cv::Mat pic(320,64 ...

  2. github提交代码流程:

    (1)  检查一遍代码改动          $git status (2) 将工作目录中的代码提交到暂存区 $ git add filename     git add -A (3)  提交代码到本 ...

  3. 【Mocha.js 101】同步、异步与 Promise

    前情提要 在上一篇文章<[Mocha.js 101]Mocha 入门指南>中,我们提到了如何用 Mocha.js 进行前端自动化测试,并做了几个简单的例子来体验 Mocha.js 给我们带 ...

  4. TeeChart常用编程语句汇总(C#)

     我用的是C# 从网上看到资料拷贝过来备忘,共同学习下: 设置chart标题:axTChart1.Header.Text.Add("标题"); 修改标题:axTChart1.Hea ...

  5. 重复发起Volley请求不要使用同一对象

    1.创建volley请求Request request = new JsonObjectRequest(...); 2.添加到队列中mRequestQueue.add(request); reques ...

  6. Java的数组长度无需编译指定,因为它是对象

    大家可以看从Thinking in Java中摘出来的代码理解一下,甚至.多维数组的子数组无须等长 //: MultiDimArray.java// Creating multidimensional ...

  7. 腾讯优测优分享 | 游戏的UI自动化测试可以这样开展

    腾讯优测是专业的自动化测试平台,提供自动化测试-全面兼容性测试,云真机-远程真机租用,漏洞分析等多维度的测试服务,让测试更简单! 对于目前的两大游戏引擎cocos-2dx.unity3D,其UI自动化 ...

  8. textarea关于空格和换行那点事

    textarea中空格连续输入多个的情况下,数据回显的时候页面只是显示一个:换行同样有问题,在textarea中有换行,在页面上却没有,今天终于看到个写的比较具体的文章,拿过来收藏下. 地址链接: h ...

  9. 转载《SimpleAdapter的参数说明》

    SimpleAdapter的参数说明 第一个参数 表示访问整个android应用程序接口,基本上所有的组件都需要 第二个参数表示生成一个Map(String ,Object)列表选项 第三个参数表示界 ...

  10. 较老版本的AFNetworking使用心得

    较老版本的 AFNetworking 下载链接 ( http://pan.baidu.com/s/14Cxga ) 将压缩包中的文件夹拖入xcode工程项目中并引入如下的框架 简单的 JOSN 解析例 ...