Vue脚手架项目环境配置及安装创建项目使用

Vue是一种渐进式框架、单文件组件、选项式 API 、组合式API。

文章目录

• 前言
• 一、Vue是什么？
• 二、安装及创建项目步骤介绍
•  
  • 1.node安装及环境配置
  • 2.使用Vue Cli快速构建项目
  • 3.解决一些配置出现的问题
  • 4.安装成功的页面
  • 5.使用Vue创建项目
  • 6.Vue脚手架项目目录说明
• 总结

---

前言

提示：易学易用、性能多变、灵活多变

     基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。

---

一、Vue是什么？

           Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

二、安装及创建项目步骤介绍

1.node安装及环境配置

(1).下载安装node（16.20.2版本）下载之后一步步默认安装即可。

       或者直接去官网下载：下载地址：Download | Node.js (nodejs.org)

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

2.使用Vue Cli快速构建项目

参照教材的版本，本课程采用Vue CLI 3.10版本，Vue CLI从3版本开始，包的名称由vue-cli 改成了vue/cli,如果您已经安装了vue-cli(1.x或者2.x),需要先卸载，再重新全局安装vue/cli。

卸载命令如下：

//  注意，第一次使用vue脚手架的同学可直接忽略此步骤

     npm uninstall vue-cli -g

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

3.解决一些配置出现的问题

注意：最近发现很多同学使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决：

npm config set registry https://registry.npm.taobao.org

或者，哪个方式快，用哪个

npm config set registry registry.npmmirror.comhttps://registry.npmmirror.comregistry.npmmirror.com

4.安装成功的页面

     成功安装界面：

5.vue create 命令创建项目

// helloworld 是项目名，可自行定义          

vue create helloworld

 执行 vue create 命令之后，可看到如下所示界面

      在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

     此界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，每个配置项的作用如下表所示：

    项目创建成功之后，根据界面提示，可以执行如下两个命令行，进入项目目录，启动项目：

cd helloword

npm run serve

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

6.Vue脚手架项目目录说明

    1、项目创建成功之后，可以看到项目的目录结构如图所示：

    2.目录结构说明如下：

---

总结

       Vue 的脚手架是由 Vue.js 官方提供的一套用于快速搭建 Vue.js 项目的命令行工具，它为开发Vue.js应用程序提供了必要的工具和环境。vue脚手架用于自动生成vue和webpack的项目模板，vue脚手架是一个快速构建vue项目的工具，可以自动安装vue所需要的插件，避免手动安装各种插件，Vue脚手架可以帮助开发者快速搭建项目结构、提供丰富的功能和插件，提高开发效率和代码质量，其中vue-cli能让人们迅速搭建一个vue项目。