vue——使用vue/cli3.0快速开发

矫情吗；* 2022-12-13 04:50 93阅读 0赞

## vue——使用vue/cli3.0快速开发 ##

### 一、介绍 ###

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：

CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）

CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等）

### 二、安装 ###

*  全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：  
    (可以使用 `vue -V`查看自己的vue版本-V的v是大写)

npm uninstall vue-cli -g  //或者 yarn global remove vue-cli

*  Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+）  
    nodejs下载官网：[http://nodejs.cn/download/ ][http_nodejs.cn_download_]
 *  安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）

cnpm install -g @vue/cli //yarn global add @vue/cli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTEwNTUx_size_16_color_FFFFFF_t_70_pic_center]

### 三、使用 ###

使用方法有两种一种是使用之前的方法创建详细可参考我上一篇博客：[https://blog.csdn.net/qq\_41510551/article/details/108803243][https_blog.csdn.net_qq_41510551_article_details_108803243]

这里主要讲解如何使用可视化项目管理工具。

#### 新建项目 ####

vue ui  //进入可视化界面

![在这里插入图片描述][20201010154726648.png_pic_center]  
这是会打开浏览器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTEwNTUx_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTEwNTUx_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTEwNTUx_size_16_color_FFFFFF_t_70_pic_center 3]  
勾选上路由Router、状态管理Vuex，去掉js的校验(Linter/Formatter)。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTEwNTUx_size_16_color_FFFFFF_t_70_pic_center 4]  
下一步中，也选上【Use history mode for router】，点击创建项目，然后弹窗中选择按钮【创建项目，不保存预设】，就进入项目创建啦。

稍等片刻之后，项目就初始化完成了。上面的步骤中，我们创建了一个vue项目，并且安装了Router、Vuex。这样我们后面就可以直接使用。

### 目录结构 ###

├── README.md            项目介绍
    ├── index.html           入口页面
    ├── build              构建脚本目录
    │  ├── build-server.js         运行本地构建服务器，可以访问构建后的页面
    │  ├── build.js            生产环境构建脚本
    │  ├── dev-client.js          开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
    │  ├── dev-server.js          运行本地开发服务器
    │  ├── utils.js            构建相关工具方法
    │  ├── webpack.base.conf.js      wabpack基础配置
    │  ├── webpack.dev.conf.js       wabpack开发环境配置
    │  └── webpack.prod.conf.js      wabpack生产环境配置
    ├── config             项目配置
    │  ├── dev.env.js           开发环境变量
    │  ├── index.js            项目配置文件
    │  ├── prod.env.js           生产环境变量
    │  └── test.env.js           测试环境变量
    ├── mock              mock数据目录
    │  └── hello.js
    ├── package.json          npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
    ├── src               源码目录 
    │  ├── main.js             入口js文件
    │  ├── app.vue             根组件
    │  ├── components           公共组件目录
    │  │  └── title.vue
    │  ├── assets             资源目录，这里的资源会被wabpack构建
    │  │  └── images
    │  │    └── logo.png
    │  ├── routes             前端路由
    │  │  └── index.js
    │  ├── store              应用级数据（state）状态管理
    │  │  └── index.js
    │  └── views              页面目录
    │    ├── hello.vue
    │    └── notfound.vue
    ├── static             纯静态资源，不会被wabpack构建。
    └── test              测试文件目录（unit&e2e）
      └── unit              单元测试
        ├── index.js            入口脚本
        ├── karma.conf.js          karma配置文件
        └── specs              单测case目录
          └── Hello.spec.js

**安装element-ui**

cnpm install element-ui --save

打开项目src目录下的main.js，引入element-ui依赖。

import Element from 'element-ui'
    import "element-ui/lib/theme-chalk/index.css"
    Vue.use(Element)

**安装axios**  
安装命令

cnpm install axios --save

全局引入（main.js）；这样在组件中，我们就可以通过this.$axios.get()来发起我们的请求了。

import axios from 'axios'
    Vue.prototype.$axios = axios

[http_nodejs.cn_download_]: http://nodejs.cn/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTEwNTUx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c2641296208e451293ef61b5b921e3c9.png
[https_blog.csdn.net_qq_41510551_article_details_108803243]: https://blog.csdn.net/qq_41510551/article/details/108803243
[20201010154726648.png_pic_center]: /images/20221123/46880c299ea043e596edf5098e82ebcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTEwNTUx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/b764e7b9c4ab46368c1405490bc97c29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTEwNTUx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/bc1c7597c1864a34b2807aea337799a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTEwNTUx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/9a641a3c4e5244e4b328418781c9835e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTEwNTUx_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/eb67264382de4e7587fd05ef65fa40f2.png