vue&脚手架基本安装 ------- vue-cli 文件夹项目的构建及介绍

1.初识vue脚手架（什么是vue-cli）

首先，Vue是一个用于构建用户界面的渐进式框架。而vue-cli是vue中的一个重要内容。vue提供了一个测试环境，并降低了webpack的使用难度。vue-cli是有Vue提供的一个官方cli，可以为单页面快速创建脚手架。它可以自动生成vue&webpack的项目模板（后面会详细介绍文件夹内容）。

需要环境

• nodeJS环境
• webpack打包工具

2.vue-cli的安装

首先vue-cli有版本之分，vue cli 升级到3后，package的名字从 vue-cli 改为了 @vue/cli。所以可以先卸载旧的版本再安装新版本以下是安装步骤。

1）卸载旧版本（未安装旧版本可跳过）

• npm uninstall vue-cli -g

  (此处-g为-global，为全局卸载)

2）全局安装新版本

• npm i - g @vue/cli

  (此处i为install可以简写为i，仍为全局安装)

3）初始化vue模板文件桥接工具（可跳过）

• npm install -g @vue/cli-init

4）通过vue+webpack创建项目（创建一个已书写好的模板文件夹）
位置是根据你的cmd命令目录创建

• vue init webpack + 项目文件夹名称

  
  会进入以下界面
  

第一行 Project name：是你的项目名称可直接回车，名字为你创建命令后的名字。
第二行 Project description：你的文件描述，可回车跳过。
第三行 Author：是你的名字，作者名。
第四行 选择模式：让用户选择 选默认推荐项 如下
Runtime + Compiler ：recommended for most users

接下来就是你的自定义选择，根据你的选择回车后确认完成安装。

3.项目文件夹内容

配置完成后程序会自动进行安装。安装完成后你的创建目录下会多出一个根据你项目名称命名的文件夹。如下

以下是文件夹具体内容介绍：

这就是vue脚手架的基本功能描述及使用。若有疑问可提问哦

-----------------------------------祝大家天天开心！

• 点赞 1
• 收藏
• 分享
• 文章举报