Vuejs环境安装与工程建立【小白Windows向】
准备了以下的工具进行安装本地开发环境:
- 代码编辑器×1【本人使用VSCode 1.11】
- Nodejs安装包×1【必须】(官网下6.10.x的就行了)
- 正常使用的Windows电脑一台(推荐Win7及以上电脑进行开发,最推荐Win10)
本文使用Powershell,cmd也可以的。
一、对于第一次使用Vue的Windows用户【搭建本地开发环境】
第一步,一路下一步安装Nodejs;
第二步,打开cmd或者WindowsPowershell或者Git命令行,用npm安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
第三步,用cnpm或者npm按照vue官网的资料安装vue
cnpm install vue
第四步,用cnpm或者npm安装打包工具(就是Web开发工程的打包工具)——webpack
cnpm install webpack -g
第五步,在准备创建工程的同级目录下安装vue-cli(推荐cnpm)
cnpm install --global vue-cli
以上为环境搭建。
二、创建Vue工程
第一步,用vue创建一个工程,在Windows会是一个文件夹的形式
vue init webpack 工程名
这里看下图,Powershell实际操作截图,有的细节以后补充。

第二步,cnpm或npm(在工程目录下)执行install,安装其他依赖
cnpm install
如下图最后两行。

漫长的刷屏和等待。

最终会部署65个包。

第三步,启动vue工程(cnpm或者npm run dev命令)

这里显示用了19.3秒,就会自动弹出浏览器页面(停止就关掉Powershell或者ControlC就行了,下次加载可以用IIS加载工程目录):

这个时候就可以用VSCode编辑整个工程了:

关于VSCode,可能需要安装一些支持Vue的插件(点我),希望微软爸爸以后能原生支持Vue吧。

Vuejs环境安装与工程建立【小白Windows向】的更多相关文章
- sharepoint环境安装
SharePoint 2013 测试环境安装配置指南 软件版本 Windows Server 2012 标准版 SQL Server 2012 标准版 SharePoint Server 2013 企 ...
- windows环境安装MySQL
转:https://www.cnblogs.com/ayyl/p/5978418.html windows环境安装MySQL mySQL下载链接:MySQL Installer 5.7 :http:/ ...
- Redis及虚拟机windows两种环境安装配置
---恢复内容开始--- Redis /rae dis/是一个开源的Key-Value数据库.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链 ...
- eclipse 下载、安装、创建java文件工程、运行---Windows 10
一.Eclipse Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.幸运的是,Eclipse 附带了一个标准的插 ...
- .NET Core Windows环境安装与体验
1.安装.NET Core SDK 在windows下开发.NET Core最好使用Visual Studio工具.下载地址与安装: VS2015最新版本:Visual Studio 2015 Upd ...
- Java JDK 8 安装和环境变量的配置(Linux and Windows)
Java JDK 8 的安装以及环境变量的配置(Linux and Windows) JDK(Java Development Kit)包含了Java语言的编译器,能够在这里下载: http://ww ...
- Redis:在windows环境安装Redis
Redis:在windows环境安装Redis 第一步: 下载windows版本的Redis:https://github.com/MSOpenTech/Redis. 第二步: 在命令行执行:D:\r ...
- Windows 10环境安装VIM代码补全插件YouCompleteMe
Windows 10环境安装VIM代码补全插件YouCompleteMe 折腾一周也没搞定Windows下安装VIM代码补全插件YouCompleteMe,今天在家折腾一天总算搞定了.关键问题是在于P ...
- PHP XAMPP windows环境安装扩展redis 致命错误: Class 'Redis' not found解决方法
PHP XAMPP windows环境安装扩展redis 致命错误: Class 'Redis' not found解决方法 1.电脑需要先安装redis服务端环境,并在安装目录下打开客户端redis ...
随机推荐
- 《java.util.concurrent 包源码阅读》11 线程池系列之ThreadPoolExecutor 第一部分
先来看ThreadPoolExecutor的execute方法,这个方法能体现出一个Task被加入到线程池之后都发生了什么: public void execute(Runnable command) ...
- head first python菜鸟学习笔记(第四章)
1,p124,错误:NameError: name 'print_lol' is not defined 要想文件内如图显示,需要把调用BIF print()改为调用第二章的nester模块中的pri ...
- win下搭建python3+PyQt5+eric6环境
一.安装python3 1.下载python3的安装包,默认安装即可,注意勾选 Add Python 3.6 to Path .但是这样默认安装的路径太长,不太方便找到,可选择定制安装,自己定义安装路 ...
- OC中只有重写没有重载
一.类的继承 Objective-c中类的继承与C++类似,不同的是Objective-c不支持多重继承,一个类只能有一个父类,单继承使Objective-c的继承关系很简单,易于管理程序. 二.方法 ...
- Docker 三剑客之 Docker Swarm
上一篇:Docker 三剑客之 Docker Compose 阅读目录: Docker Machine 创建 Docker 主机 Docker Swarm 配置集群节点 Docker Service ...
- 【转】千万不要在JS中使用连等赋值操作
原文链接 千万不要在JS中使用连等赋值操作 目录 前言 赋值顺序? 连续赋值能拆开写么? 后记 前言 文章标题这句话原本是在国外某JavaScript规范里看到的,当时并没有引起足够的重视,直到最 ...
- idea—— 模版配置
修改File Header: /** * @author: ${USER} Date: ${DATE} Time: ${TIME} */ 新增Package Header: /* * Copyrigh ...
- Java快速扫盲指南
文章转自:https://segmentfault.com/a/1190000004817465#articleHeader22 JDK,JRE和 JVM 的区别 JVM:java 虚拟机,负责将编译 ...
- dij洛谷电车
//Gang #include<iostream> #include<cstring> #include<algorithm> #include<cstdio ...
- Linux积累 命令之cat和wc
cat主要有三大功能: 1.一次显示整个文件. $ cat filename 2.从键盘创建一个文件. $ cat > filename 只能创建新文件,不能编辑已有文件. 3.将几个文 ...