vue-@vue/cli工具

之前虽然一直使用vue,但是一直没有记录过关于vue的使用，最近学习的过程发现了一个新的vue的功能，记录一下。

脚手架

创建vue项目的官方脚手架@vue/cli ，使用脚手架可以帮你快速搭建项目的基本结构

安装脚手架

前提是已安装完成node,否则没有npm可以使用

npm install -g @vue/cli

查看脚手架支持的命令

通过以下命令查看可以执行的命令

vue -h

终端：

Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment

创建项目

命令行创建

//创建项目
vue create <project-name>
 
cd <project-name>

//项目启动
npm run server

图形界面创建

在学习的过程中，发现了一个有意思的命令

vue ui

运行后在浏览器端打开界面：

点击create 页签创建新的项目

点击create new project,输入项目名称，选择项目路径，选择包管理工具，其他可根据需要选择，否则直接默认即可

点击next
这里是对项目的预设，截图中的内容比较多是因为之前操作预设保存过，一般如果是常用的预设可以保存，如果没保存下次需要重新选择预设内容

本人此次选择了手动Mannul，这个就是重新手动设置，打开开关表明使用该特性，初始化时会包含该特性

点击next
本人仍旧选择了vue2,因为vue3的使用仍存在问题，所以暂时仍旧使用的是vue2，也可以根据当前需要选择，如果能熟练使用可以选择vue3

选择完成后，点击create project 开始创建项目

创建完成之后可以看见项目的面板

可以查看项目引用的插件

可以查看依赖，并管理依赖项

还有管理你的配置

在Task页签中，你可以通过点击启动/打包你的项目

以上是通过图形界面创建项目，不过估计一般熟悉后都直接用命令行了

其他命令

依赖更新

若是已存在项目更新,但是最好执行前备份一下代码，谨慎点，很可能更新后你的代码就无法运行了

vue upgrade

更新项目中的工具,一般都是全局更新@vue/cli，然后执行该命令查看其它需要更新的依赖插件等

一路y,所有列出的插件都会被更新

重新设置相关配置

如果package.json 中的eslint已存在，重新唤起eslint相关设置

//vue invoke [plugin-name]
vue invoke @vue/eslint

增加配置内容，例如vuex/vue-router

vue add [plugin-name]

关于vue的项目初始化先记录到这里啦~方便时间过久之后的查看