一 安装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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。