一、安装前准备
在进行Vue的安装之前，我们需要确保计算机上已经安装了Node.js，同时也可以安装npm或者yarn，本教程以npm为例。
1. 安装Node.js：可以在Node.js官网（https://nodejs.org）下载相应的安装文件，然后按照提示进行安装即可。
# 验证Node.js是否成功安装
node -v
2. 安装npm：如果已经安装了Node.js，则一般自带npm，可以通过以下命令来验证是否已经安装：
npm -v
如果需要升级npm的版本，可以使用以下命令：
npm install npm@latest -g
二、安装vue-cli
1. Vue CLI（Vue Command Line Interface）是Vue.js官方提供的一个脚手架工具，可以帮助我们快速搭建一个Vue项目的基础结构。
2. 在命令行中输入以下命令来安装Vue CLI：
npm install -g @vue/cli
3. 安装完成后，可以输入以下命令来验证是否安装成功：
vue --version
三、创建Vue项目
1. 在命令行中输入以下命令来创建一个新的Vue项目：
vue create my-project
其中，my-project是新创建的项目名称，可以根据实际情况进行修改。
2. 在安装过程中，会让我们选择一些配置项，包括预设、插件等等，可以根据实际需要进行选择。
3. 安装完成后，可以进入项目目录：
cd my-project
4. 然后启动项目：
npm run serve
可以在控制台看到类似以下的输出：
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.xxx.xxx:8080/
表示我们的项目已经成功运行，可以通过浏览器访问http://localhost:8080/来查看。
四、自定义配置
1. 在创建项目时，除了选择预设之外，我们还可以自己进行一些定制化的配置。可以在创建项目时使用–preset选项来指定一个预设文件，也可以使用–inlinePreset选项来指定一个JSON字符串。例如：
vue create --preset my-preset my-project
vue create --inlinePreset '{ "useConfigFiles": true }' my-project
2. 如果需要对已经创建的项目进行配置更改，可以使用vue ui命令来启动Vue的可视化配置界面，然后在界面中进行编辑保存即可。
vue ui
五、总结
通过本教程，我们学习了如何在Node.js和npm的环境下，安装Vue CLI，并使用该工具来创建一个新的Vue项目。
原创文章，作者：OXVUX，如若转载，请注明出处：https://www.506064.com/n/334267.html
微信扫一扫 
支付宝扫一扫 