目录

一、Vue CLI脚手架简介☺

1.Node.js前置环境的安装

2.安装npm管理器

3.安装淘宝镜像(cnpm)

二、安装vue-cli

1. 版本号查看

2.旧版本卸载

3.新版本安装

4.检查

三、Vue项目的搭建

📌进入Vue项目管理器

★命令方式创建

若localhost拒绝访问怎么办？

一、Vue CLI脚手架简介☺

什么是vue脚手架？

Vue脚手架（Vue CLI）是一个官方提供的命令行工具，用于快速搭建和管理Vue.js项目的开发环境。它提供了一套可配置的脚手架，帮助开发者初始化Vue项目，并集成了开发所需的工具和依赖项，包括构建工具、开发服务器、打包工具等。babel、webpack都集成在其中。

Vue CLI是官方提供的一套全面的开发工具链，可以帮助开发者快速搭建Vue项目。以下是使用Vue CLI搭建Vue脚手架的步骤：

• 安装Vue CLI：通过npm或yarn全局安装Vue CLI。
• 创建Vue项目：使用命令行运行vue create project-name来创建一个新的Vue项目。
• 选择项目配置：可以选择默认配置或手动配置项目选项。
• 添加插件：可以根据项目需求选择添加一些插件。
• 运行项目：运行npm run serve命令来启动开发服务器。

1.Node.js前置环境的安装

点击官网下载node.js

安装完成之后，打开安装目录下的文件。

配置环境变量

通过快捷键【win+I】进入设置，点击系统-->系统信息

点击高级系统设置

点击高级-->环境变量

找到Path,点击编辑

将刚才安装node.js的路径复制粘贴

win+R查看是否安装成功  node -V 在cmd运行

2.安装npm管理器

npm包管理器，是集成在node中的，所以安装了node也就有了npm。有了npm就可以通过命令去下载资源库文件。

npm常见命令：

1. npm install：用于安装项目所需的依赖包。
2. npm install package-name：安装指定的包。
3. npm uninstall package-name：卸载指定的包。
4. npm list：列出项目中已安装的包。
5. npm start：启动项目。
6. npm run script-name：运行项目中的特定脚本。
7. npm search package-name：搜索 NPM 仓库中的包。
8. npm publish：发布自己开发的包。
9. npm link：在本地创建包的链接。
10. npm ls：列出项目的依赖树。
11. npm update：更新项目中的包。
12. npm outdated：检查已安装的包是否有可用的更新。

npm 安装md5报错，提示证书过期：

解决方案：

npm cache clean --force
npm config set strict-ssl false
npm install

以管理员身份运行cmd命令符窗口

使用管理员身份运行命令行，在命令行中，执行下指令：

npm config set prefix "安装路径"

查看安装路径：

npm config get prefix

3.安装淘宝镜像(cnpm)

看个人需求安装，安装成功后，可用cnpm 代替npm下载资源文件。

npm install -g cnpm --registry=https://registry.npm.taobao.org

二、安装vue-cli

Vue CLi介绍

如已安装旧版本vue-cil，需先卸载再安装，否则vue-cil原始文件一直存在，版本号不会更新！！！

1. 版本号查看

首先查看一下版本号，看是否为 vue-cli 3.6 及以上版本。

vue -v

2.旧版本卸载

1、删除原文件；
2、保险起见，可再执行如下命令。

npm uninstall vue-cli -g

3.新版本安装

npm install -g @vue/cli

vue --version

项目的创建【两种方式】

• 使用命令vue ui可视化窗口进行创建
• 使用vue create vue-projectName命令创建

📌进入Vue项目管理器

vue ui

npm install -g @vue/cli

vue create <project-name>

cd <project-name> npm install

npm run serve