Vue-Cli脚手架项目的搭建【新手快速入手】

Vue-Cli脚手架项目的搭建【新手快速入手】

引用

CSDN

1.

https://blog.csdn.net/2301_79258776/article/details/138500548

Vue CLI是一个官方提供的命令行工具，用于快速搭建和管理Vue.js项目的开发环境。本文将详细介绍Vue CLI脚手架项目的搭建过程，包括Node.js前置环境的安装、npm管理器的安装、淘宝镜像的安装、Vue CLI的安装以及Vue项目的搭建。

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  

4.检查

vue --version  

安装好后，便可以创建Vue项目了。

三、Vue项目的搭建

项目的创建【两种方式】

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

进入Vue项目管理器

下面演示vue ui可视化窗口搭建脚手架：

在命令行中键入：

vue ui  

等待项目创建完成！！！

命令方式创建

1、全局安装Vue CLI： 如果你还没有安装Vue CLI，你可以通过npm或yarn来安装它。

使用npm安装：

npm install -g @vue/cli  

将

替换为你的项目名称。

2、创建新项目： 使用Vue CLI创建一个新项目，运行以下命令：

vue create <project-name>  

3、选择预设： 在创建过程中，Vue CLI会询问你几个问题，包括是否选择默认预设（包含一些基本的配置和依赖），或者手动选择特性。

4、安装依赖并启动项目： 项目创建完成后，进入项目目录并安装依赖：

cd <project-name> npm install  

安装完依赖后，你可以启动开发服务器：

npm run serve  

若localhost拒绝访问怎么办？

打开电脑的控制面板->

这样我们就可以成功访问localhost服务器啦！！！