【VueJS】windows环境安装vue-cli及webpack并创建VueJS项目
1. 安装node.js, Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。
这次node.js不是主角,默认已安装好了,通过npm –v查看node.js是否安装好以及安装的node.js版本

如果你安装的是旧版本的 npm,可以通过 npm 命令“npm install npm -g”来进行版本升级。
npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);npm安装插件过程:从http://registry.npmjs.org下载对应的插件包,但是该网站服务器位于国外,所以经常下载缓慢或出现异常。
因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,在此我们要感谢万能的淘宝啊,因为我们乐于分享的淘宝团队干了这事。
所以我们可以使用淘宝定制的 cnpm(gzip 压缩支持) 命令行工具代替默认的 npm;
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:cnpm install [name] 。
2. 安装vue-cil,因为是全局安装,所以只需要运行一次就可以了。安装成功后,以后不必再安装,安装命令如下:
npm install -g vue-cli
3. 用vue-cil构建项目
3.1 把当前目录定位到项目存放目录

3.2 新建一个自己的vue项目“饿了么sell”

3.3 项目构建成功后,按照上一步给出的提示命令,往下面一步步执行

(使用npm命令时,过程比较缓慢,可以使用cnpm来代替,使用方法将npm install换成cnpm install即可,我这里使用的是npm)


3.4 运行了npm run dev之后,会自动打开一个浏览器窗口,在地址栏中输入http://localhost:8080,即可看到创建的项目运行的效果:

此文章发在本人订阅号和博客上,转载请注明出处。
本人订阅号二维码

【VueJS】windows环境安装vue-cli及webpack并创建VueJS项目的更多相关文章
- Redis:在windows环境安装Redis
Redis:在windows环境安装Redis 第一步: 下载windows版本的Redis:https://github.com/MSOpenTech/Redis. 第二步: 在命令行执行:D:\r ...
- PHP XAMPP windows环境安装扩展redis 致命错误: Class 'Redis' not found解决方法
PHP XAMPP windows环境安装扩展redis 致命错误: Class 'Redis' not found解决方法 1.电脑需要先安装redis服务端环境,并在安装目录下打开客户端redis ...
- Windows环境安装tesseract-ocr 4.00并配置环境变量
最近要做文字识别,不让直接用别人的接口,所以只能尝试去用开源的类库.tesseract-ocr是惠普公司开源的一个文字识别项目,通过它可以快速搭建图文识别系统,帮助我们开发出能识别图片的ocr系统.因 ...
- windows环境安装MySQL
转:https://www.cnblogs.com/ayyl/p/5978418.html windows环境安装MySQL mySQL下载链接:MySQL Installer 5.7 :http:/ ...
- Windows环境安装MySQL数据库
Windows环境安装MySQL数据库 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 最近在学习Java语言,开发环境在Windows操作系统上,因此需要在Windows上安装My ...
- 安装vue CLI后, 出现安装权限问题
问题:安装vue CLI后,出现:npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/usr/l ...
- MongoDB(二):在Windows环境安装MongoDB
1. 在Windows环境安装 1.1 MongoDB下载 要在Windows上安装MongoDB,首先打开MongoDB官网:https://www.mongodb.com/download-cen ...
- Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别
这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...
- 在使用vue+webpack模版创建的项目中使用font-awesome
前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...
- windows系统下 VUE cli手脚架环境安装
1.安装 node.js环境 (cmd命令工具里输入 node -v 检测是否安装成功) 2.安装VUE 全局环境 npm install --global vue-cli (cmd命令工具里面安装 ...
随机推荐
- Android蓝牙通讯【转】
本文转载自:http://blog.csdn.net/vnanyesheshou/article/details/51554852 随着可穿戴设备的流行,研究蓝牙是必不可少的一门技术了. 总结了下蓝牙 ...
- Python爬虫 —— 抓取美女图片
代码如下: #coding:utf-8 # import datetime import requests import os import sys from lxml import etree im ...
- ss命令能识别的TCP状态的关键字
[TCP_ESTABLISHED] = "ESTAB", [TCP_SYN_SENT] = "SYN-SENT", [TCP_S ...
- 深入理解JVM - 垃圾收集器与内存分配策略 - 第三章
引用计数算法——判断对象是否存活的算法 很多教科书判断对象是否存活的算法是这样的:给对象添加一个引用计数器,每当一个地方引用它时,计数器值就加1:当引用失效时,计数器值就减1:任何时刻计数器为0的对象 ...
- RQNOJ 328 炮兵阵地:状压dp
题目链接:https://www.rqnoj.cn/problem/328 题意: 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队. 一个N*M的地图由N行M列组成(N≤100,M≤10), ...
- TP框架入门基础
ThinkPHP目录: ThinkPHP主目录文件夹: Conf文件夹: Library文件夹: Library=>Think文件夹:
- linux 命令:crontab
一.crond简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务 工具,并且会自动启动c ...
- ACM学习历程——HDU5017 Ellipsoid(模拟退火)(2014西安网赛K题)
---恢复内容开始--- Description Given a 3-dimension ellipsoid(椭球面) your task is to find the minimal distanc ...
- 【LeetCode】064. Minimum Path Sum
题目: Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right w ...
- maven学习八 关于maven的version
在一个有继承关系的POM文件中,父项目中有如下定义: <dependencyManagement> <dependency> <groupId>com.type ...