使用webpack搭建vue环境的教程详解

1、安装node.js,在官网下载，直接下一步，完成。nodejs里默认包含npm环境。国内安装包的速度太慢，建议使用cnpm淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、vue-cli构建SPA应用

安装vue：npm install vue -g

安装vue-cli：npm install -g vue-cli

使用webpack构建一个简单项目：vue init webpack-simple demo5;此时会让你填写项目名称，描述，作者，版权许可(license),是否使用sass。此时一个vue项目就构建好了。

使用webpack构建一个复杂项目：vue init webpackdemo6,此时的项目就会构建的复杂一些。

此时：cd demo6

npm run dev即可运行开发环境

使用webpack跨域代理
使用代理可以使本地环境可以跨域请求其他服务器数据。

在config文件夹下的index.js中

，修改下列代码：

此时，本地开发环境就可以跨域请求其他服务器的数据。

总结

以上所述是小编给大家介绍的使用webpack搭建vue环境的教程，希望对大家有所帮助！

赞 (0)

相关推荐

  • vue2.x+webpack快速搭建前端项目框架详解

    vue2.x+webpack快速搭建前端项目框架详解

    一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是具体实操. 二.基本命令操作. 1.在开发之前需要首先安装node.js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/ 在装完node之后npm包管理工具也自动的安装好,安装完之后,在命令行输入node -v或者npm -v,出现版本号说明安装成功.如下

  • webpack搭建vue 项目的步骤

    webpack搭建vue 项目的步骤

    前期准备 webpack vue.js npm nodejs ES6语法 由于本文内容是通过npm来加载vue,所以开始之前需安装nodejs环境,安装完成之后再执行以下步骤: 创建项目 mkdir vue-demo cd vue-demo 使用 npm init 命令 生成package.json文件 npm init 大概生成的package.json 如下: { "name": "vue-demo", "version": "1.

  • webpack4+Vue搭建自己的Vue-cli项目过程分享

    前言 对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛 最近在看webpack4,深感知识浅薄,这两天也一直在思考cli的配置,借助一些别人的实践,尝试自己搭建vue的项目,这里使用webpack4版本,之前我在网上查找别人的vue项目搭建,但是都是webpack3的,所以写了本文,如果有错误,或者有什么问题,请大佬们指出 关于webpack的本文不会多说,请看webpack文档 关于本文的github地址vue-MYCLI 你们的start是我发表的动力!!!!

  • vue+node+webpack环境搭建教程

    vue+node+webpack环境搭建教程

    一.环境搭建 1.1.去官网安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html ) 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错.推荐最新版本. 下载安装包之后直接点击安装即可.测试安装成功的界面如下: 1.2.利用npm安装webpack命令行语句为npm install webpack -g.测试安装成功的界面如下: 1.3.下面就是安装淘宝镜像,如下图

  • 详解使用vue脚手架工具搭建vue-webpack项目

    详解使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目. 1.安装node环境 可以

  • 使用webpack搭建vue环境的教程详解

    1.安装node.js,在官网下载,直接下一步,完成.nodejs里默认包含npm环境.国内安装包的速度太慢,建议使用cnpm淘宝镜像. npm install -g cnpm --registry=https://registry.npm.taobao.org 2.vue-cli构建SPA应用 安装vue:npm install vue -g 安装vue-cli:npm install -g vue-cli 使用webpack构建一个简单项目:vue init webpack-simple d

  • 使用 Docker 搭建 Laravel 本地环境的教程详解

    使用 Docker 搭建 Laravel 本地环境的教程详解

    Laravel 官方提供 Homestead 和 Valet 作为本地开发环境,Homestead 是一个官方预封装的 Vagrant Box,也就是一个虚拟机,但是跟 docker 比,它占用体积太大,启动速度慢,同时响应速度很慢,现在有了 docker 这种更好的方式,可以轻松方便的搭建整套 PHP 开发环境. 本文就介绍如何使用 docker 搭建 Laravel 本地环境. 安装 docker 首先安装 docker. 克隆 laradock laradock 官方文档: http://

  • 使用VScode搭建ROS开发环境的教程详解

    俗话说＂工欲善其事必先利其器＂,之前在Ubuntu上运行的ROS项目都是用vim或者gedit编写和修改代码,然后在终端编译运行,很不方便,函数跳转查看都没办法实现.所以今天我决定找一个方便的开发工具,也就是找一个像Windows上的VS那样的集成开发工具(IDE),ROS官网上有一个不同IDE的对比文章,网址在这里 我选择使用VScode．下载安装好VScode后,在扩展栏安装C/C++,CMake,CMake Tools,Code Runner,ROS(deprecated),Chinese

  • go语言入门环境搭建及GoLand安装教程详解

    go语言入门环境搭建及GoLand安装教程详解

    Go(又称 Golang)是 Google 的 Robert Griesemer,Rob Pike 及 Ken Thompson 开发的一种静态强类型.编译型语言.Go 语言语法与 C 相近,但功能上有:内存安全,GC(垃圾回收),结构形态及 CSP-style 并发计算. Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.

  • webpack搭建vue环境时报错异常解决

    webpack搭建vue环境时报错异常解决

    目录 首先是配置package.json 然后安装webpack工具 运行webpack测试 4.运行webpack测试 配置各种loader(文件解析器) (1)配置入口(entry) (2)配置出口(output) (3)配置加载器(loader) (4)配置插件(plugin) 搭建本地服务器 今天用webpack手动搭建环境的时候,疯狂报错,好大会都进行不了下一步 首先是配置package.json //自动配置 npm init -y 一切都没有任何问题 然后安装webpack工具 n

  • VUE安装使用教程详解

    如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpack或Browserify模块打包器配合使用,同时Vue也提供配套工具来开发单文件组件. 1. 安装nodejs 由于npm(nodejs package manager)是nodejs的包管理器,所以要首先安装nodejs,从官网下载相应版本安装即可https://nodejs.org/en/download/.

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

  • MySQL5.7.18主从复制搭建(一主一从)教程详解

    一.复制原理 主服务器将更新写入二进制日志文件,并维护文件的一个索引以跟踪日志循环.这些日志可以记录发送到从服务器的更新.当一个从服务器连接主服务器时,它通知主服务器从服务器在日志中读取的最后一次成功更新的位置.从服务器接收从那时起发生的任何更新,然后封锁并等待主服务器通知新的更新. MySQL使用3个线程来执行复制功能(其中1个在主服务器上,另两个在从服务器上.当发出START SLAVE时,从服务器创建一个I/O线程,以连接主服务器并让它发送记录在其二进制日志中的语句.主服务器创建一个线程将

  • vue axios用法教程详解

    axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1.    Vue.prototype.$ajax=axio

  • selenium+python环境配置教程详解

    一.安装Python 1)官网下载安装 2)配置环境变量(未勾选自动配置需要手动配置) 3)检查是否安装成功(交互窗口中输入Python -v) 二.Selenium 3.X +FireFox 驱动 +geckodriver 1.安装selenium: 1)W+r输入cmd,然后输入pip install selenium 2)安装FireFox,添加附加组件selenium IDE.FireBUG 3) https://github.com/mozilla/geckodriver/releas

随机推荐