一 安装nvm（node的版本管理工具：一个nvm可以管理很多node版本）

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

 

1 注意：

v0.39.1这是nvm的版本号，当前最新版本是v0.39.1。详见 

2 常用的nvm命令：

命令	描述
nvm ls-remote	列出远程服务器上所有的可用版本，当前命令需要使用网络
nvm list	列出目前在本地的nvm里面安装的所有node版本
nvm install <node版本号>	安装指定版本的node.js
nvm uninstall <node版本号>	卸载指定版本的node.js
nvm use <node版本号>	临时切换当前使用的node.js版本
nvm alias default <node版本号>	切换当前系统默认使用的node.js版本，设置指定版本的node.js解析器为默认版本

 

二 安装node（基于Chrome V8引擎的JS运行环境）

1 安装最新稳定版本

nvm install stable

 

2 安装指定版本

nvm install v16.16.0

Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：

node -v

三 包管理器

3.1 包管理器npm（安装node.js完成后，在node.js中会同时帮我们安装一个包管理器npm）

 

可以借助npm命令来安装node.js的包。这个工具相当于python的pip包管理器。

常用的npm命令：

命令	描述
npm install -g <包名>	安装node包模块 -g表示全局安装，如果没有-g，则表示在当前项目安装 npm install <包名> 可以简写成"npm i <包名>"
npm list	查看当前项目目录下已安装的node包模块
npm view <包名> engines	查看node包模块所依赖的Node的版本
npm outdated	检查node包模块是否已经过时，命令会列出所有已过时的node包模块
npm update <包名>	更新node包模块
npm uninstall <包名>	卸载node包模块
npm <包名> -h	查看指定node包模块的相关命令或帮助文档
npm run <子选项>	启动项目

3.2 包管理器yarn（第三方开发者提供了比npm更好用的yarn包管理器）

安装yarn包管理器

npm install -g yarn

yarn基本使用命令

命令	描述
yarn global add <包名>	全局安装包或模块，如果去掉global选项则表示本次项目安装
yarn remove <包名>	卸载/移除包或模块
yarn	根据在当前项目目录下的package.json的配置自动下载安装包列表，也可用yarn install
yarn dev	根据在当前目录下的package.json文件的配置启动一个http服务器运行前端项目
yarn init	根据在当前目录下自动生成一个package.json配置文件，用于自动构建前端项目
yarn publish	把当前目录下文件根据package.json配置，作为一个开源包发布到官方维护的包管理器列表中。

四 安装项目构建工具

vue2.0官方推荐使用vue-cli，vue3.0官方推荐使用vite2.0。

4.1 使用Vue-CLI创建vue项目

1 安装vue-cli

npm install -g @vue/cli
# yarn global add @vue/cli  # 注意，安装不成功就换成npm

安装完成以后，可以通过以下命令查看vue/cli的版本

vue -V

2 生成vue项目

cd ~/Vue
# vue create 项目目录名   # 会自动创建一个目录用于保存项目的。
vue create myproject

3 跟着官方提示，输入命令。最后打开链接地址，访问项目，http://localhost:8080

4.2 使用Vite创建vue项目

1 安装vite

npm create vite@latest
# yarn create vite

2 跟着官方提示，设置项目目录名和各项配置。终端下通过以下命令直接运行项目。

# yarn dev --host=0.0.0.0 --port=5173
vite --host=0.0.0.0 --port=5173 # 默认--host=127.0.0.1 --port=5173

3 访问页面

 

五 项目执行流程

 

 项目执行流程图

 

5.1 项目执行流程图说明

整个vue项目最开始用户访问的是主文件index.html，index.html中会引入src文件夹中的main.js，main.js中实例化vm对象，并导入顶级的单文件根组件src/App.vue，App.vue中会通过组件嵌套或者路由来引用页面组件，views组件会根据开发的页面需要加载components文件夹中的其他单文件子组件。

 

5.2 项目的目录结构

项目根目录/
├── index.html          # vue项目唯一的html页面，整个项目所有的内容都是被index.html加载提供给用户访问的
├── node_modules/  # 前端项目运行的依赖库目录，如果缺少则在项目根目录下，使用yarn或者npm update来恢复
├── package.json      # 前端项目运行的依赖库的配置文件[通用]，类似于python的requirements.txt
├── yarn.lock            # 项目运行的依赖库的配置文件[yarn]
├── vite.config.js      # 项目构建工具vite独有的运行配置文件，一般用于设置跨域代理 
├── public/               # 访问入口目录，部分版本的vue的index.html入口文件会保存到这里，也可能不在这里
├── src/                    # 项目的源码目录，是项目的核心，所有的源代码都保存在这里
         ├── App.vue            # 项目的根组件，由App.vue进行加载所有的组件页面和子组件
         ├── assets/             # 资产目录，保存项目所需的静态资源[img/视频/音频等附件]
         ├── router/             # 路由文件存储目录，保存项目所有的路由文件
                   └── index.js   # 默认的主路由文件，负责导入vue组件与url地址进行一对一的映射
         ├── components/   # 子组件目录，保存一些零零碎碎的部分页面内容的组件
         └── main.js             # 全局初始化入口脚本，index.html被运行时会自动加载这个js文件。
└── dist/                         # 项目开发完成以后肯定要把项目部署上线，前端人员就需要编译整个项目，编译后的代码保存这里。 

 

标签：node,npm,vue,项目,yarn,js,搭建
来源： https://www.cnblogs.com/daminghuahua/p/16576998.html