一、开发环境搭建

1、前端框架一般依赖node.js,我们首先要安装node.js.

2、由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器。

安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org 之后回车等待命令

3、接着安装全局的vue-cli脚手架,用于帮助你快速搭建所需的Vue的开发模板框架
$ cnpm install -g vue-cli 回车,等待安装,

安装完成后,可以输入vue -v 然后回车,如果出现vue客户端版本号,则说明成功的安装了vue

4、用npm安装webpack
cnpm install webpack -g
此时webpack已经安装到了全局环境下,可以通过命令webpack -h试试.

 
5、在一个目录下新建一个vuepro文件夹,cd到该目录下,然后输入命令:
vue init webpack vue-test   (项目名称:vue-test)

启动调试,顺序输入下列命令:

cd vue-test
npm install(如果已经安装了npm此条命令不必输入)
如果已经执行npm install 初始化的vue项目下回多出一个依赖文件夹

npm run dev

启动成功,打开浏览器:

 

 
大概解释下每个文件夹代表的含义:
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Windows 环境下vue+webpack前端开发环境搭建的更多相关文章

  1. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  2. 搭建windows环境下(nginx+mysql+php)开发环境

    搭建windows环境下(nginx+mysql+php)开发环境   1. 所需准备应用程序包        1.1 nginx 程序包nginx-1.0.4.zip或其他版本(下载地址: http ...

  3. windows环境下搭建vue+webpack的开发环境

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...

  4. windows下搭建vue+webpack的开发环境

    1. 安装git其右键git bash here定位比cmd的命令行要准确,接下来的命令都是利用git bash here.2. 安装node.js一般利用vue创建项目是要搭配webpack项目构建 ...

  5. Windows 7下Node.js Web开发环境搭建笔记

    Node.js是什么? 我们看看百科里怎么说的?JavaScript是一种运行在浏览器的脚本,它简单,轻巧,易于编辑,这种脚本通常用于浏览器的前端编程,但是一位开发者Ryan有一天发现这种前端式的脚本 ...

  6. 「C语言」Windows+EclipseCDT下的C语言开发环境准备

    之前写过一篇 「C语言」在Windows平台搭建C语言开发环境的多种方式 ,讨论了如何在Windows下用DEV C++.EclipseCDT.VisualStudio.Sublime Test.Cl ...

  7. Windows XP下安装WinCE6.0开发环境

    Windows下怎样编译WinCE6.0及开发应用程序.以下介绍(安装之前必须保证C盘有足够的空间!20g左右!主要是由于在安装程序在安装过程中要解压): 在Visual Studio 2005之前, ...

  8. Windows 系统下Vue的安装及环境搭建

    Hope to help those in need and those who use Vue for the first time. 1.获得并安装node.js.nodejs官网:https:/ ...

  9. webpack前端开发环境搭建

    要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...

随机推荐

  1. python+selenium的WebElement对象操作

    webelement对象操作 webelement对象是selenium中所有元素的父类,也就是webelement对象拥有的方法,其它元素对象都会有: 只是不同的对象在调用特定方法时,效果是不一样的 ...

  2. 初学Java总结

    经过了一年C语言的学习,自己也渐渐懂了一些东西.由于二者有共通之处,所以在刚开始学习Java的过程中,并没有刚开始学习C语言的时候那么晦涩难懂. 第一周: 1)了解了Java的发展过程以及JDK的安装 ...

  3. 时间、金钱在java、数据库中的变量类型之总结

    在编写程序时,总是有些变量的类型搞不很明白,现将目前涉及到的变量总结一下: 1.“时间”类型 (1).在数据库中的变量类型是:DateTime 比如: operateTime DATETIME,//数 ...

  4. 解决在Tomcat中的server.xml中修改了配置,启动后还原的问题

    正确答案,你要在eclipse的项目Servers中,找到你的tomcat,打开有各种配置文件,在这里改,才会在使用eclipse启动tomcat后不会自动恢复.

  5. Spring Cloud部署+Mybatis整合

    一:架构简介 Spring Cloud是微服务思想的体现.每个项目单独部署,我只需要知道你服务的name就能直接调用你,而不关心你的ip和端口的变化.当接口服务不可用的时候,我能感知到你无法用了,就不 ...

  6. python 重点理论知识点

    Python多线程 GIL blablabla concurrent blablabla 简单地说就是作为可能是仅有的支持多线程的解释型语言(perl的多线程是残疾,PHP没有多线程),Python的 ...

  7. kotlin和vertx和mongo写的一个服务器验证登陆功能(很简陋)

    包结构长这个样子: server包:(服务器相关配置) HttpServer:用ver.x创建了一个http服务器,把接收到的req请求传入RPCRequest中: RPCRequest:解析请求bo ...

  8. 使用JS提交表单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. mybatis的<用<![CDATA[]] 忽略解析

    1 CDATA 术语 CDATA 指的是不应由 XML 解析器进行解析的文本数据(Unparsed Character Data). 在 XML 元素中,"<" 和 &quo ...

  10. 基于 SwiftUI 创建一个可删除、可添加列表项的列表

    执行环境 macOS Mojave: 10.14.5 xcode: Version 11.0 beta 6 (11M392q) 预览效果 完整代码 import SwiftUI class Item: ...