windows10系统下vue开发环境搭建
安装NodeJs
下载地址:http://nodejs.cn/download/
到官网下载自己系统对应的版本,按照推荐的方式默认安装,这里不再赘述。安装完成后,打卡powershell,执行命令node -v
查询一下,检查是否正常安装。
如果提示找不到node命令,添加node安装路径到系统环境变量,重启powershell,再试。
如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级。
sudo npm install npm -g #linux
npm install npm -g # windows
更多NodeJS教程可以参考以下资料:
- 中文官网:http://nodejs.cn/api/
- 菜鸟学堂:https://www.runoob.com/nodejs/nodejs-tutorial.html
安装 webpack
安装好 npm 之后,就可以通过 npm 命令来下载各种工具了。
安装打包工具 webpack,-g 表示全局安装。
npm install webpack -g
更多webpack教程可以参考以下资料:
- 菜鸟学堂:http://www.runoob.com/w3cnote/webpack-tutorial.html
安装vue-cli
安装 vue 脚手架项目初始化工具 vue-cli,-g 表示全局安装。
npm install vue-cli -g
安装国内的镜像工具
因为 npm 使用的是国外中央仓库,有时候下载速度比较“感人”,就像 Maven 有国内镜像一样,npm 在国内也有镜像可用。这里建议使用淘宝镜像。
安装淘宝镜像,安装成功后 用 cnpm
替代 npm
命令即可,如: cnpm install webpack -g
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装 Yarn
Yarn 是 Facebook 发布的 node.js 包管理器,它比 npm 更快、更高效,可以使用 Yarn 替代 npm 。
如果你安装了node,就安装了npm,可以使用下面的命令来安装:
npm i yarn -g --verbose
npm官方源访问速度实在不敢恭维,建议使用之前切换为淘宝镜像,在yarn安装完毕之后执行如下指令:
yarn config set registry https://registry.npm.taobao.org
到此为止我们就可以在项目中像使用npm一样使用yarn了。
使用 Yarn 跟 npm 差别不大,具体命令关系如下:
npm install => yarn install
npm install --save [package] => yarn add [package]
npm install --save-dev [package] => yarn add [package] --dev
npm install --global [package] => yarn global add [package]
npm uninstall --save [package] => yarn remove [package]
npm uninstall --save-dev [package] => yarn remove [package]
创建 demo 项目
环境已经搭建完成,现在我们通过 vue-cli 来生成一个项目,名称为 test-ui。
//可能需要先安装cli-init
npm i -g @vue/cli-init
//然后再执行下面的命令
vue init webpack test-ui
一路根据提示输入项目信息,等待项目生成。
生成的目录为test-ui
,如下
进入到项目根目录,按照指示执行命令,启动项目。
cd test-ui
npm run dev
浏览器访问对应地址,如这里的: http://localhost:8081,会出现 vue 的介绍页面。
打完收工。
windows10系统下vue开发环境搭建相关推荐
- ④ESP8266 开发学习笔记_By_GYC 【Ubuntu系统下ESP8266 开发环境搭建】
目录 ④ESP8266 开发学习笔记_By_GYC [Ubuntu系统下ESP8266 开发环境搭建] 一.安装前准备 1.乐鑫官方的ESP-IDF 编程指南 2.ESP-IDF风格的ESP8266 ...
- cc java开发环境搭建_Windows系统下java开发环境搭建
总的来说,开发环境是程序员工作的基础,没了他,IT工作就没得开展了.话不多说,今天提供的教程是Windows系统下Java开发环境的搭建,具体如下 1.下载并安装JDK(JAVA Developmen ...
- Windows系统下Java开发环境搭建
卸载JDK 1.删除Java的安装目录(通过右键点击我的电脑->属性->高级系统设置->环境变量->系统变量中的JAVA_HOME找到Java的安装目录) 2.删除JAVA_H ...
- linux环境下java开发_Linux Ubuntu系统下Java开发环境搭建
软件151田杰中 2. 在合适的路径下创建文件夹用来存储Java JDK,本例选择在/opt目录下新建JVM子文件夹.操作如下 打开Terminal(后文成为T1),输入: cd /opt ...
- Linux Ubuntu系统下Java开发环境搭建
软件151田杰中 1. 前往ORACLE官网下载最新版本的Java JDK:http://www.oracle.com/technetwork/java/javase/downloads/index. ...
- linux下嵌入式编译环境搭建,ubuntu系统下嵌入式开发环境搭建(ubuntu 16.04)
1.安装git sudo apt-get install git 2.安装vim sudo apt-get install vim 3.安装arm-linux-gcc (1) arm-linux-gc ...
- Android下NDK开发环境搭建
Android下NDK开发环境搭建 1. AndroidNDK安装与配置 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP部 ...
- Windows下Android开发环境搭建和配置
关于Windows下Android开发环境搭建.配置方面文章,网上一搜一堆,为方便以后参考,权且做个记录,主要关注安装过程中的注意事项.对新手提醒的是,本文介绍SDK开发Android APK环境搭建 ...
- Vue 开发环境搭建(Mac 版)
Vue 开发环境搭建(Mac 版) 参考: https://www.jianshu.com/p/cc722eba1f46 https://www.runoob.com/w3cnote/vue2-sta ...
- 在ubuntu10.04下 GStreamer开发环境搭建
在ubuntu10.04下 GStreamer开发环境搭建 一 安装gstreamer 1 下载gstreamer源码 http://gstreamer.freedesktop.org/src/gst ...
最新文章
- codeforces 610D D. Vika and Segments(离散化+线段树+扫描线算法)
- Janusec应用安全网关(WAF网关)
- SpringMVC通过注解在数据库中自动生成表
- Creating-Observables
- 【事故反演】配置过程(变位)
- jupyter 数据分析可视化案例_Python数据分析及可视化实例之Anaconda、Jupyter简介
- GitHub vs. Bitbucket 不只是功能不同
- C语言模拟实现标准库函数之strcpy()
- 解决outlook无法启动
- win7下安装openSSH
- android与单片机wifi通信原理图,基于单片机的wifi模块原理图分析
- 华为云计算ie学习一IA部分(1)
- Android netd和Framework以及netd和kernel之间的通信
- MySQL学习笔记①_案例记录
- Android:日志系统
- Unity镜头特写效果
- python代码设置超参数_超参数调优总结,贝叶斯优化Python代码示例
- mac 我用Mac的这一年
- 功能更新 | 身份认证增强安全配置
- 什么是NP问题,NP-complete和NP-hard问题.