Vue CLI脚手架项目搭建入门指南
Vue CLI脚手架项目搭建入门指南
一、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常见命令：
npm install：用于安装项目所需的依赖包。npm install package-name：安装指定的包。npm uninstall package-name：卸载指定的包。npm list：列出项目中已安装的包。npm start：启动项目。npm run script-name：运行项目中的特定脚本。npm search package-name：搜索NPM仓库中的包。npm publish：发布自己开发的包。npm link：在本地创建包的链接。npm ls：列出项目的依赖树。npm update：更新项目中的包。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 CLI，需先卸载再安装，否则Vue CLI原始文件一直存在，版本号不会更新！
1. 版本号查看
首先查看一下版本号，看是否为 Vue CLI 3.6 及以上版本。
vue -v
2. 旧版本卸载
- 删除原文件；
- 保险起见，可再执行如下命令。
npm uninstall vue-cli -g
3. 新版本安装
npm install -g @vue/cli
4. 检查
vue --version
安装好后，便可以创建Vue项目了。
三、Vue项目的搭建
项目的创建【两种方式】
- 使用命令
vue ui可视化窗口进行创建 - 使用
vue create vue-projectName命令创建
进入Vue项目管理器
下面演示vue ui可视化窗口搭建脚手架：
在命令行中键入：
vue ui
等待项目创建完成！
命令方式创建
- 全局安装Vue CLI：如果你还没有安装Vue CLI，你可以通过npm或yarn来安装它。
使用npm安装：
npm install -g @vue/cli
将<project-name>替换为你的项目名称。
- 创建新项目：使用Vue CLI创建一个新项目，运行以下命令：
vue create <project-name>
选择预设：在创建过程中，Vue CLI会询问你几个问题，包括是否选择默认预设（包含一些基本的配置和依赖），或者手动选择特性。
安装依赖并启动项目：项目创建完成后，进入项目目录并安装依赖：
cd <project-name>
npm install
安装完依赖后，你可以启动开发服务器：
npm run serve
若localhost拒绝访问怎么办？
打开电脑的控制面板->
这样我们就可以成功访问localhost服务器啦！