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解析器为默认版本 |
1 安装最新稳定版本
nvm install stable
2 安装指定版本
nvm install v16.16.0
Node.js如果安装成功,可以查看Node.js的版本,在终端输入如下命令:
node -v
可以借助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 <子选项> | 启动项目 |
安装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。
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
1 安装vite
npm create [email protected] # 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 访问页面
项目执行流程图
整个vue项目最开始用户访问的是主文件index.html,index.html中会引入src文件夹中的main.js,main.js中实例化vm对象,并导入顶级的单文件根组件src/App.vue,App.vue中会通过组件嵌套或者路由来引用页面组件,views组件会根据开发的页面需要加载components文件夹中的其他单文件子组件。
项目根目录/ ├── 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/ # 项目开发完成以后肯定要把项目部署上线,前端人员就需要编译整个项目,编译后的代码保存这里。