vue之VueCli4的安装及使用

一、前言

   Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

   Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

二、VueCli安装步骤

①、使用npm或者cnpm安装（要确保电脑已经安装了npm或cnpm，没有安装的可参考博客：npm和cnpm的安装https://blog.csdn.net/wjnf012/article/details/80422313?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163704513916780264067623%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163704513916780264067623&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-80422313.first_rank_v2_pc_rank_v29&utm_term=cnpm%E5%AE%89%E8%A3%85&spm=1018.2226.3001.4187https://blog.csdn.net/wjnf012/article/details/80422313?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163704513916780264067623%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163704513916780264067623&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-80422313.first_rank_v2_pc_rank_v29&utm_term=cnpm%E5%AE%89%E8%A3%85&spm=1018.2226.3001.4187），确保安装了npm和cnpm后，win+R，输入cmd打开命令行，输入如下命令：

npm  install -g @vue/cli

或者

cnpm install -g @vue/cli

其中install可以直接写成i。

②、验证安装是否成功（查看版本）

输入命令（两者二选一，如果-v不行（报错），就输--version）：

vue -v

或

vue --version

如图：                                          

 至此，VueCli安装完成。

三、VueCli的使用

①、创建（初始化）项目

想在哪个文件夹创建初始项目，就在该文件夹路径处输入cmd运行命令提示符窗口，如图所示

 ，然后输入一下命令：

vue create 项目名

注：项目名不可以含大写字母，否则会报错（这里项目名为project，下图app项目是为了演示创建的，本文章以project为准）。

如图：      

②、启动项目

项目创建成功后，会提示两道命令，分别是cd命令和npm run serve命令，只需按顺序输入即可运行项目，如图：

                                             

 然后访问Local： 所提示的网址即可访问到我们创建的项目了。如图：

 ③、使用UI功能，即图形化界面，这样子可以不使用命令行创建运行，或许更加方便快捷。

     1、首先，我们要结束刚才的命令行窗口的服务，按ctrl+c即可，会提示是否终止批处理（Y/N)，输入Y即可。

    2、然后再输入如下命令，启动UI，之后会自动跳转到你的默认浏览器。

vue ui

如图：                                                     

3、 启动后，便可以在图形化界面操作自己的项目了，如图                                                                   

 4、导入项目后，如图：

 至此，关于Vue的安装及基本使用讲解完毕。