vue-cli的安装与使用

vue-cli的安装与使用

为什么需要安装vue-cli？

• vue-cli是vue的脚手架，可以方便地集成开发前端所需要的各种各样的工具，大大简化了前端开发者在开发过程中安装依赖、配置文件、协调文件之间的关系、webpack打包等操作的难度，使开发者更多地将精力集中在业务逻辑上

安装nodejs

• 安装vue-cli之前，首先需要安装nodejs，没有它vue-cli将无法工作
• 点击官网下载地址，选择windows安装包（推荐LTS版本，不要下载最新版），下好了以后根据提示安装即可，安装过程应该不会有什么问题

更换npm下载镜像

• npm是随着nodejs下载好了以后附带的东西，它是用来安装各种各样的依赖、插件的，是一个包管理工具，类似python的pip
• npm默认下载源是国外的，在安装依赖的时候会很慢，所以需要更换源，打开cmd，输入如下所示的命令

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

• 为确保换源成功，可以输入如下命令查看

npm config get registry

• 结果如下图所示
  

下载vue-cli

• 截止到2021年8月17日，vue的版本已经经历了多个时期的变换，现在已经到vue4了，鉴于国内外许多基于vue的依赖、插件并没有很好地适配vue4的新语法，用着会出很多问题，这里还是选择安装vue3版本
• 输入如下命令指定vue-cli的安装版本（vue是不需要单独安装的）

npm install -g @vue/[email protected]

• 静静等待安装完毕即可

使用vue-cli

Vue项目管理器

• vue-cli安装完毕后，直接在命令行中输入vue ui，打开图形界面，进入vue项目管理器
  

创建新项目

• 目前还没有一个项目，选择创建来创建一个项目，选择一个合适的位置即可，然后会出现如下界面
  
• 输入项目名，包管理器可以选择默认，也可以选择npm（这两个是等效的，默认就是npm），关于要不要初始化git仓库，最好不要初始化，比较优的选择是在github、gitee上先初始化一个仓库，然后用这个仓库来存放vue项目代码和后端代码

预设

• 点击下一步之后会进入预设，选择手动配置项目，因为有些功能在默认的里面没有，选择如下几个功能
  
• 除了默认的Babel和Linter，我们还需要选择Router和Vuex，前者是用来做路由管理的，使得路由完全掌握在前端的手中，不需要和后端确认了；后者是用来做全局状态管理的，一般存储用户相关信息以及和用户相关的function，并且可以做到异步调用的功能，但是要注意，Vuex里面的信息在页面刷新后会初始化，需要重新获取

最后一步配置

• 好了，到最后一步的配置，选择如下图所示
  
• 一定记住选择ESLint + Standard config，否则在语法检查上会给你疯狂报错，导致项目无法运行

运行app

• 点击任务->server->运行，然后点击启动app的按钮即可，图形化的管理方式比命令行轻松多了
  
• 看到如下显示即代表运行成功