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

安装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系统就会提示你为这个模板取个名字

创建完成

依次输入这两个命令

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