安装Vue

一、安装node.js

1. 官网/下载地址

1.1. 官网地址

Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/zh-cn

1.2. 选择版本，进行下载

2. 安装步骤

1）双击下载好的文件（以node-v18.18.0-x64.msi为例），点击【Next】。

2）勾选 I accept the terms in the License Agreement，点击【Next】。

3）点击【Next】。如需更改安装目录，点击【Change...】。

4）点击【Next】。

5）点击【Next】。

6）点击【Install】，等待安装。

7）点击【Finish】，安装结束。

3. 测试安装是否成功

打开命令行窗口，运行如下命令：

node -v    // 查看node.js版本信息。
npm -v     // 查看npm版本信息。

 可获取版本信息则安装成功，运行示例如下：

4. 环境配置

4.1. 设置npm全局安装目录和日志缓存目录

1）在安装目录下新建两个文件夹。（注：如果提示权限不足，则需给nodejs文件夹开放权限。）

node_global：全局安装目录。

node_cache：全局缓存目录。

2）在命令行窗口运行如下命令：

npm config set prefix "node_global路径" 
npm config set cache "node_cache路径"

 运行示例如下：

4.2. 设置淘宝镜像。

在命令行窗口运行如下命令：（注：淘宝镜像已更换新的域名。）

npm config set registry https://registry.npm.taobao.org   旧域名
npm config set registry https://registry.npmmirror.com    新域名

查看域名命令

npm config get registry

4.3. 设置环境变量

4.3.1. 用户变量

在用户变量中，将Path里面的【C:\Users\你的用户名\AppData\Roaming\npm】修改为node_global路径。

4.3.2. 系统变量

在系统变量中，新建（注：这里的node_modules文件夹尚不存在，安装模块时会自动创建。）。

变量名：NODE_PATH

变量值：node_global路径\node_modules

在Path中新建%NODE_PATH%。

二、使用Vue

1. 创建项目

1）在工作目录中打开命令行窗口，运行以下命令 ：

npm create vue@latest

创建的项目将使用基于 Vite 的构建设置。这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。根据提示完成创建即可。

2. 项目结构

dist                    // 打包目录。执行打包命令后自动生成
node_modules            // 依赖包目录。安装的依赖包自动放在这里
public                  // 静态资源目录。这些资源不经过Webpack处理
    favicon.ico             // 网站图标
config                  // 端口配置
    dev.env.js              // 开发环境配置
    index.js                // 主要配置
    prod.env.js             // 生产环境变量
src                     // 项目源码及资源目录
    assets                  // 静态资源目录，如图片、字体、样式等。这些资源会经过Webpack处理
        logo.png
    components              // 组件目录
        HelloWorld.vue          // vue 默认的欢迎页面 
    views                   // 页面目录
    App.vue                 // 根组件。渲染整个工程
    main.js                 // 入口文件。创建Vue实例，引入其他的库，定义全局变量。
.gitignore              // git 配置。git提交时需要忽略的文件
index.html              // 网站入口页面
package-lock.json       // npm 包的具体来源和版本号
package.json            // npm 包配置文件
README.md               // 项目说明
vite.config.js          // vite基本配置

3. 常用命令

-g：--global 的简写。全局安装。可以将组件安装到之前设置的 node_global 文件夹。

-S： --save 的简写。组件会被添加到 package.json 的 dependencies 中，在开发环境和生成环境都生效。

-D： --save-dev 的简写。组件会被添加到 package.json 的 devDependencies中,只在开发环境生效。

i ： install 的简写

npm install --save element-plus
npm install --save axios
npm install --save echarts
npm install --save dayjs
npm install --save echarts

npm list vue -g              // 查看列表
vue --version                // 查看 vue 脚手架版本
vue ui                       // 打开可视化界面
npm install -g vue           // 安装 vue
npm uninstall -g vue         // 卸载 vue

npm outdated                 // 检查过时的依赖包
npm update                   // 更新依赖包至最新版本