vue需要的环境:
node.js :
Node.js和Vue.js通常会一起使用。Node.js作为后端服务器,处理服务器端的逻辑和数据访问,而Vue.js则负责前端用户界面的构建和交互。通过Ajax通信,Vue.js应用程序向Node.js服务器发送请求,并使用服务器返回的数据更新UI。这种前后端分离的方式提高了Web应用程序的可维护性和可扩展性。
npm:
NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,主要用来安装vue项目需要的一些包和资源,运行项目也要用到npm
vue-cli脚手架:
Vue脚手架是用于快速构建Vue.js项目的工具。它提供了一系列的命令和模板,可以帮助开发者快速搭建项目的基础结构,提高开发效率。搭建项目的框架
webpack:
webpack是一个前端构建工具,主要用于代码的打包和优化
我们主要使用nvm来管理node.js的版本,它是一个版本管理工具,可以方便随时切换。有些时候运行别人的项目的时候,和自己的node版本不一样,就运行不出来,这时候就需要重新换它项目开发时候的版本了,直接安装node.js太麻烦了,每次切换版本都要卸载然后重新装,配置环境。
nvm安装教程:
进入下载地址:
https://github.com/coreybutler/nvm-windows/releases
windows系统下载nvm-setup.zip安装包
2. NVM安装
如果电脑上之前已经单独安装了node,先卸载删除(原先的环境变量也不需要了可以删除),然后解压nvm-setup.zip安装包,进入解压的文件夹,双击exe后缀文件进行安装:
选择nvm的安装路径:
选择nodejs的快捷方式路径(这里一定得是空文件夹或者不创建这个文件夹,因为nvm会自动创建这个文件夹为快捷方式):
下一步后确认安装即可
验证:
安装完成后查看环境变量会发现新增了NVM_HOME(nvm安装路径)和NVM_SYMLINK(nvm自动创建的nodejs文件夹的快捷方式路径),如下图:
在命令行窗口输入nvm
后有如下图信息证明安装成功:
三、NVM使用
注意:nvm在切换node版本时需要系统的管理员权限,所以需要以管理员身份打开命令行窗口!!!
1. 设置nvm环境
nvm默认会从github下载npm,可能会有网络问题,所以最好设置为淘宝镜像。nvm的配置也很简单,可以采用命令方式,在shell中执行:
1 2 |
|
或者直接修改配置文件(在nvm安装路径下的settings.txt),如下图:
2.安装nodejs
直接命令行执行(v6.9.4可以替换为需要安装的版本,此处仅做示例):
1 |
|
安装成功
执行nvm list
查看效果如下:
3.使用或切换nodejs版本
nvm use 20.1.0
4.全局安装vue
npm install vue -g
5.安装webpack(非必须)
npm install webpack -g
npm install webpack-cli -g
6.安装脚手架vue-cli
npm install vue-cli -g
7.创建一个vue应用程序
vue create my-project
cd my-project
运行项目命令:
npm run dev (vue2)
npm run serve (vue3)
查看vue版本的命令--npm list vue
说明这是vue3
vue ui 命令 是打开vue的图形化界面进行项目管理
查看node.js版本
查看vue脚手架版本
查看npm版本