安装node.js环境

1）安装node.js环境
下载地址

我下载的版本是14.16.0
2）选安装目录进行安装，我选在E盘nodejs目录下
3）测试，在命令提示符下输入命令
node -v 会显示当前版本

C:\Users\我>node -v
v14.16.0

安装npm

1)npm全称Node Package Manager,他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理NPM的功能和服务端项目构建工具Maven差不多，我们通过npm可以很方便的下载js库，打包js文件。
2)node.js已经自动集成了npm工具
3)在命令提示符中输入 npm -v可查看当前npm版本

C:\Users\我>npm -v
6.14.11

4)查看npm包的管理路径，在命令行输入npm config ls

C:\Users\我>npm config ls
; cli configs
metrics-registry = “https://registry.npm.taobao.org/”
scope = “”
user-agent = “npm/6.14.11 node/v14.16.0 win32 x64”
; userconfig C:\Users\我.npmrc
cache = “D:\nodejs_package\npm_cache”
prefix = “D:\nodejs_package\npm_modules”
registry = “https://registry.npm.taobao.org/”
; builtin config undefined
; node bin location = E:\Node.Js\node.exe
; cwd = C:\Users\我
; HOME = C:\Users\我
; “npm config ls -l” to show all defaults.

第一次安装默认是在C盘下，以上是我修改过的路径
修改步骤：在目标盘创建一个文件夹，我的是D:\nodejs_package
在D:\nodejs_package\中创建两个文件夹npm_modules（放的是下载的各种js库）和npm_cache（缓存包）。修改的目的是防止各种包和依赖都下载在C盘
修改包管理路径
打开命令行依次输入：
npm config set prefix “D:\nodejs_package\npm_modules”
npm config set cache “D:\nodejs_package\npm_cache”
后面目标文件夹的路径以自己设置的为主
此时再使用 npm config ls查询npm管理包路径，发现路径已经更改

安装vue脚手架

在命令行输入命令：npm install -g @vue/cli 回车
就会自动安装了
安装完成以后输入 vue -V查看版本

C:\Users\我>vue -V
@vue/cli 5.0.4

这个命令输入一次即可，以后创建项目都不用再创建脚手架了

创建项目

先创建一个空文件夹,然后进入到这个文件夹中，在当前目录下输入cmd回车进入命令窗口，创建项目命令： vue create 文件名

F:\vuecli_work>vue create project-demo

上下方向键移动选择Manually select features选择自定义安装方式

空格选择/取消

选择3.x代表着vue项目的版本
no表示不选择历史版本的路由
In dedicated config files 表示将文件下载至自定义的路径中
最后一个问题问你是否要将现在创建的这个项目作为一个模板以备将来开发vue项目时直接安装使用，我这里选择的No，这个按照个人喜好，选择Yes系统就会提示你为这个模板取个名字

创建完成

依次输入这两个命令

项目便启动成功了
在自己的浏览器输入网站即可访问

Vue项目环境搭建及创建项目流程相关推荐

谷粒商城项目篇1_分布式基础篇_分布式基础概念、环境搭建、创建项目
写在前面为丰富项目经验,特此学习B站开源视频<全网最强电商教程<谷粒商城>对标阿里P6/P7,40-60万年薪>希望通过此学习能巩固所学,将技术栈串接起来. 此项目三个阶段 ...
[ExtJs6] 环境搭建及创建项目
1. 环境搭建 sencha cmd 和 extjs6 sdk. sencha cmd: https://www.sencha.com/products/extjs/cmd-download/ ext ...
1.RN环境搭建，创建项目，使用夜神模拟调试
1.环境搭建(Yarn.React Native 的命令行工具(react-native-cli)) npm install -g yarn react-native-cli 具体参考参见官方(中文 ...
JSP开发之TomcatEclipse环境搭建（创建项目运行一个简单的jsp文件）
通过之前的内容,咱们现在已经安装好了Tomcat服务器了,但是为了项目创建和扩展,咱们还需要使用Eclipse这个东西来搭建一个编码环境.废话不多说,咱们可以在https://www.eclipse. ...
React 环境搭建以及创建项目工程（一）
下载软件需要用到三个软件 node.js https://nodejs.org/zh-cn/ vs code. https://code.visualstudio.com/ google 浏览器 h ...
cocos 2d-x 环境搭建和创建项目HelloWorld
第一步,也是最重要的一步先拥有一台电脑随便本教程是win10 win7当然也可以 mac土豪勿扰,在下买不起. 下载vs2017(vs2019似乎也可) vs官网. 下载的时候要注意一定要勾选c ...
React 环境搭建以及创建项目工程（二）
创建工程首先创建一个工程 npx create-react-app weibo cd移动到当前创建的文件下 cd weibo 安装 React 路由 npm install react-router ...
代驾APP_第一章_项目环境搭建_第一节
代驾APP_第一章_项目环境搭建文章目录代驾APP_第一章_项目环境搭建 1-1 创建根项目一.创建SpringBoot项目二.覆盖pom.xml文件 1-2 创建根项目一.创建公共模块二 ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...

Vue项目环境搭建及创建项目流程

安装node.js环境

安装npm

安装vue脚手架

创建项目

Vue项目环境搭建及创建项目流程相关推荐

最新文章

热门文章