Vue-cli2--使用/教程/实例

清疚 2023-10-02 16:25 45阅读 0赞

原文网址：[Vue-cli2--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue-cli2--_IT_-CSDN]

## 简介 ##

**说明**

本文介绍Vue的脚手架工具Vue-cli的用法。

本文介绍的vue-cli的版本为2.0。

**官网**

github：[https://github.com/vuejs/vue-cli/tree/v2\#vue-cli--][https_github.com_vuejs_vue-cli_tree_v2_vue-cli--]

**系列文章**

1.  [Vue-cli2--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue-cli2--_IT_-CSDN]
2.  [@vue/cli3--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_IT_-CSDN]
3.  [@vue/cli3--使用图形化界面创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_--_IT_-CSDN]
4.  [@vue/cli3--使用命令创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_--_IT_-CSDN 1]
5.  [@vue/cli4--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客\_vuecli4中文文档][vue_cli4--_IT_-CSDN_vuecli4]
6.  [@vue/cli4--使用图形化界面创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli4--_--_IT_-CSDN]
7.  [@vue/cli4--使用命令创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli4--_--_IT_-CSDN 1]

## Vue-cli简介 ##

Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。

使用Vue-cli有以下几大优势

1.  Vue-cli是一套成熟的vue项目架构设计，会跟着Vue版本的更迭而更新
2.  Vue-cli提供了一套本地的热加载的测试服务器
3.  Vue-cli集成了一套打包上线的方案，可使用webpack或Browserify等构建工具

## **vue-cli命令参数** ##

下边这些参数，命令都是vue xxx，而不是vue-cli。

<table> 
 <tbody> 
  <tr> 
   <td><strong>参数</strong></td> 
   <td><strong>作用</strong></td> 
  </tr> 
  <tr> 
   <td>build</td> 
   <td>制作一个项目原型（不常用）</td> 
  </tr> 
  <tr> 
   <td>-h/--help</td> 
   <td>查看命令用法</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>列出可用的官方模板</td> 
  </tr> 
  <tr> 
   <td>-V/--version</td> 
   <td>查看vue-cli版本</td> 
  </tr> 
 </tbody> 
</table>

## **安装** ##

npm install -g vue-cli

*  一定要在全局模式下安装vue-cli，否则无法使用vue命令
 *  上边命令默认安装最新版vue-cli，可自行指定版本：npm install -g vue-cli@版本号

安装完之后，可以验证是否安装成功：

*  vue //会打印Vue-Cli帮助信息
 *  vue -V //打印Vue-Cli版本

## **创建项目** ##

vue init webpack my-project

进入工程目录安装依赖：npm install

目录结构：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

详细结构：

## **运行项目** ##

npm run dev

此时会自动打开网页：localhost:8080

## **部署项目** ##

npm run build

生成的dist目录，就是打包构建后的项目目录

## 其他网址 ##

[Vue命令行工具vue-cli - 小火柴的蓝色理想 - 博客园][Vue_vue-cli - _ -]

[Vue-cli2--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121482857
[https_github.com_vuejs_vue-cli_tree_v2_vue-cli--]: https://github.com/vuejs/vue-cli/tree/v2#vue-cli--
[vue_cli3--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121482954
[vue_cli3--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125436578
[vue_cli3--_--_IT_-CSDN 1]: https://knife.blog.csdn.net/article/details/125436648
[vue_cli4--_IT_-CSDN_vuecli4]: https://knife.blog.csdn.net/article/details/121482997
[vue_cli4--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125397525
[vue_cli4--_--_IT_-CSDN 1]: https://knife.blog.csdn.net/article/details/125436695
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210711230920744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[Vue_vue-cli - _ -]: https://www.cnblogs.com/xiaohuochai/p/7277771.html