Vue脚手架项目

前言

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

---

一、Vue CLI三个主要工具

1、 CLI

CLI是一个npm包，通过Vue.js命令提供核心功能。它可以轻松构建一个新项目，同时，如果你希望通过可视化界面来构建（创建）项目的话，你可以运行vue ui命令行来打开可视化界面。

2、 CLI Service

CLI Service是一个开发依赖项，安装在脚手架项目当中，可以帮助开发项目、打包项目和检查项目的一些相关配置。

3.、CLI插件

CLI插件也是npm的包，可以为项目提供一些额外的功能，在开发的过程中，可以通过命令行vue add添加CLI插件，比如路由插件(vue-router)、vuex插件等等。

二、vue脚手架项目环境配置

1、下载安装node,下载之后一步步默认安装即可。

1. 点击这个下载地址

2. PS：检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

2、下载安装VScode代码编辑工具

VScode代码编辑工具点击下载 然后安装按步骤来就不会出错了

3、vue2项目调试插件，下载vue.js_devtools，项目使用此插件

1. 下载，解压

2. 在浏览器打开，点击扩展

3. 然后开启开发者模式
   

4. 最后把.crx结尾的文件拖入浏览器的扩展程序中即可使用。

三、使用Vue Cli快速构建项目

1、vue cli 脚手架的安装

 //  通过npm全局安装@vue/cli脚手架  @3.10表示下载某个指定版本，如果不写，则下载最新版本
           `npm install -g @vue/cli`
            PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装
           //安装淘宝镜像的命令行
           ①  npm install -g cnpm --registry=https://registry.npmmirror.com
          // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些
           ②  cnpm install -g @vue/cli
          //PS：如需要卸载vue/cli包，可执行以下命令行
          npm uninstall -g @vue/cli 注意：最近发现很多同学使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决： npm config set
 registry https://registry.npm.taobao.org  或者，哪个方式快，用哪个 npm config set registry https://registry.npmmirror.com

如下操作步骤

1.步骤一

2.步骤二
成功安装界面：

3.步骤三

重新打开cmd命令符，输入vue -V

再次检查是否存在

存在后，就可以进行下一个操作了

2、vue create 命令创建项目

1.在创建vue create操作之前，可以先将自己所要创建的项目指定到相应的文件夹中（下图是我本人想要指定的文件夹）存在指定的文件夹最好不要存在有中文 ，不然可能会出错!!!

2.再创建vue create创建项目

//tuxiang 是项目名，可自行定义
vue create tuxiang
输入完后就会出现下图模样

3.在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：
4.此界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，每个配置项的作用如下表所示：

配置项	说明
Babel	JavaScript语法编译器
TypeScript	TypeScript是JavaScript的超集，其包含了并扩展了JavaScript的语法，需要被编译输出为JavaScript才能在浏览器运行
Progressive Web App (PWA) Support	渐进式Web应用程序
Router	vue-router（vue路由）
Vuex	vue的状态管理模式
CSS Pre-processors	CSS预处理器，如less或sass
Linter/Formatter	代码风格检查和格式化（如：ESlint）
Unit Testing	单元测试（unit tests）
E2E Testing	端对端测试

5.然后回车，大家根据需求选择相应的配置项，一步步往后创建项目即可。项目创建成功之后，根据界面提示，可以执行如下两个命令行，进入项目目录，启动项目：

(1)cd tuxiang
(2)npm run serve
(3)项目加载完成

(1)
(2)

(3)

6.接下来，在浏览器输入：http://localhost:8080/ 地址，即可看到如下页面

7.（我用的是tuxiang） 项目创建成功之后，可以看到项目的目录结构如图所示：

8.使用Visual Studio Code，可进行运行与添加项目里面的内容与修改，我上一个文章也简单说明了下载Visual Studio Code和如何运行等等，可以去看一下

Visual Studio Code目录结构说明如下：

总结

这个也是我这段时间学到的，希望对大家有用，有写得不好的地方，也请大家多多见谅！
最后，祝大家学习进步，快快乐乐度过每一天！