windows下搭建vue+webpack的开发环境
1. 安装git
其右键git bash here定位比cmd的命令行要准确,接下来的命令都是利用git bash here。
2. 安装node.js
一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要安装node.js。
建议不要安装在系统盘(如C:)
下载完毕,按照windows一般应用程序,一路next就可以安装成功。
3. 安装npm
4. 安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架
npm install -g vue-cli,回车,等待安装
安装完后,可以输入vue,然后回车,如果出现vue的信息,则说明安装成功了。
5. 创建项目
自己找一个合适的地方,新建一个项目文件夹demo,根据自己的需要命名,
打开此文件夹,右键git bash here,
输入:vue init webpack test(项目文件夹名),回车,等待一小会儿,依次出现‘git’下的项,可按下图操作:
此时,观察demo的文件夹下又多了一个test文件夹,这个test文件夹就是vue项目的文件夹,如图所示:
6. 在test文件夹下git bash here
npm install,回车,等待一小会儿,回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)。
7. 在命令行里继续输入 npm run dev来测试环境是否搭建成功,如果出现如下图说明成功了:
8. 在浏览器里输入localhost:8080就可以查看页面如下:
原文链接:http://www.cnblogs.com/jiajia123/p/6132265.html
windows下搭建vue+webpack的开发环境的更多相关文章
- windows环境下搭建vue+webpack的开发环境
前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...
- react-native —— 在Windows下搭建React Native Android开发环境
在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...
- windows下搭建Apache+Mysql+PHP开发环境
原文:windows下搭建Apache+Mysql+PHP开发环境 要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); Apache2.2;MySQL Server 5. ...
- 一步一步在Windows下搭建React Native Android开发环境
搭建JAVA开发环境 依据操作系统分为x86或x64位的.下载jdk1.8以上的版本号. 本机安装时的java版本号:jdk-8u45-windows-x64.exe 配置JAVA的环境变量 JAVA ...
- 手把手教你在Windows下搭建React Native Android开发环境
最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的 ...
- 【转】在Windows下搭建React Native Android开发环境
http://www.jianshu.com/p/2fdc4655ddf8 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变 ...
- Windows下搭建Eclipse+Android4.0开发环境
官方搭建步骤: http://developer.android.com/index.html 搭建好开发环境之前须要下载以下几个文件包: 一.安装Java执行环境JRE(没这个Eclipse执行不起 ...
- windows下搭建nginx+php+laravel开发环境(转)
1.前言 windows下大多我们都是下载使用集成环境,但是本地已经存在一个集成环境,但不适合项目的需求.因此准备再自己搭建一个环境. 2.准备 工具: 1) 下载 nginx1.14.0(版本根据自 ...
- windows环境下安装vue+webpack的开发环境
本人最近在学习vue,在学习的过程中遇到对的问题和解决方法 1.我们首先要安装node.js.node.js的官方地址为:https://nodejs.org/en/download/,下载完毕,按照 ...
随机推荐
- 201871010135 张玉晶《面向对象程序设计(java)》第十四周学习总结
项目 内容 这个作业属于哪个过程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/zyja/p/11963 ...
- Android TextField : set focus + soft input programmatically
Good sir, try this: edittext.setFocusableInTouchMode(true); edittext.requestFocus(); Im not sure, bu ...
- dateNode 启动不了
dateNode 启动不了 进去路径中找到 name和data文件夹,current下面分别有 一个 version文件,打开发现两个clusterId都不一样 把name和data文件里面的ver ...
- luoguP3455 [POI2007]ZAP-Queries
题意 设\(f(n)=\sum\limits_{i=1}^{a}\sum\limits_{j=1}^{b}[gcd(i,j)==n],F(n)=\sum\limits_{n|d}f(d)\) 发现\( ...
- 5-ESP8266 SDK开发基础入门篇--了解一下操作系统
对于操作系统不知道有没有害怕接触的... 先说一下操作系统是什么意思,其实咱的电脑就运行了操作系统,手机,等等... 操作系统和任务分不开,所谓任务就是一个一个的执行各个功能的函数,,,操作系统呢就是 ...
- ESA2GJK1DH1K升级篇: 快速的移植升级程序到自己的项目(APP用户程序制作)
前言 用户程序比较简单,但是起着至关重要的作用 用户程序是和BootLoader程序相互配合的 拷贝文件到自己的项目 APP用户程序的 stmflash.c stmflash.h 和 上一节的Boot ...
- 字段加密实践(django-fernet-fields)
一.fernet介绍 Fernet 用于django模型字段对称加密,使用 crytography 库. 官网帮助文档 1.先决条件 django-fernet-fields 支持Django 1.8 ...
- Linux性能优化实战学习笔记:第四十九讲
一.上节回顾 上一期,我们一起梳理了,网络时不时丢包的分析定位和优化方法.先简单回顾一下.网络丢包,通常会带来严重的性能下降,特别是对 TCP 来说,丢包通常意味着网络拥塞和重传,进而会导致网络延迟增 ...
- [LeetCode] 794. Valid Tic-Tac-Toe State 验证井字棋状态
A Tic-Tac-Toe board is given as a string array board. Return True if and only if it is possible to r ...
- [LeetCode] 347. Top K Frequent Elements 前K个高频元素
Given a non-empty array of integers, return the k most frequent elements. Example 1: Input: nums = [ ...