【Vue学习笔记】01Vue CLI 的使用与介绍

Vue CLI

• 是一个基于 Vue.js 进行快速开发的标准工具
• 可通过@vue/cli 搭建交互式的项目脚手架

CLI @vue/cli

• 快速创建 Vue 项目
• 需要全局安装的 npm 包

CLI 服务@vue/cli-service

• 开发环境依赖
• 局部安装在 @vue/cli 创建的项目中的 npm 包
• packsge.json 文件中找到对应的 script 命令
• 通过 npm 调用这些 script 命令 配置服务器或打包

CLI插件

• 提供可选功能的 npm 包
• 对项目的管理
• package.json 文件中 对应的 dependencies 查看安装的功能插件

Vue CLI 创建项目

@vue/cli 的全局安装

npm install -g @vue/cli
vue --version //查看安装版本

创建项目

vue create projectName

运行项目

cd 项目名
npm run serve 

访问http://localhost:8080 查看效果

常用插件

以下插件是构建项目中所需要使用的：

• npm/cnpm install vue-router --save：Vue 路由组件，用于实现建立 url 和页面之间的映射关系，根据需求自动跳转路由页面。
• npm/cnpm install element-ui --save：element-ui 框架，用于美化网页，帮助我们快速完成页面布局。
• npm/cnpm install axios --save：基于 promise 的 HTTP 库，用于发送请求。

未使用的插件

• npm/cnpm install babel-polyfill --save：通过 Polyfill 方式在目标环境中添加缺失的特性。

以下插件是对项目功能进行扩展所需要使用的：

• npm/cnpm install vue-quill-editor --save：Vue2 封装的 Quill 富文本编辑器组件，用于实现富文本编辑。
• npm/cnpm install mavon-editor --save：基于 vue 的 markdown 编辑器，用于实现富文本编辑。
• npm/cnpm install vue-schart --save：使用 vue.js 封装了 sChart.js 图表库的一个小组件，用于创建图表。
• npm/cnpm install vue-cropperjs --save：Vue 图像裁剪器组件，用于裁剪的目标图像或画布元素。
• npm/cnpm install vuedraggable --save：Vue 拖拽组件，用于实现拖拽功能。
• npm/cnpm install vue-i18n --save：国际化插件，用于切换语言。

Vue 文件项目结构

• node_modules 这个目录是存放我们项目开发依赖
• public 这个目录提供的是一个应急手段。存放在这个文件夹中的静态资源不会经过 webpack，我们如果需要使用里面的静态资源就需要使用绝对路径来对其进行引用。
• src 源码 存放几乎所有的代码文件
• static 资源目录。包含样式文件、字体文件、图片文件等等各种静态资源
• .xxxx 文件 这些文件是一些配置文件，包括语法配置，git 配置，还有我们引入的一些插件配置等。
• package.json 项目配置文件，前引入的插件的配置信息都在里面，还有一些与项目有关的配置也在其中。
• README.md 项目的说明文档，markdown 格式编写。

src 目录

• api 接口模块并使用 axios 实例。
• assets 模块资源目录，与 static 不同的是，他会被 webpack 所处理，而 static 文件则是直接使用即可。
• components 模块组件目录，（教程的项目中)将这些组件分为两组：common 公共组件和 page 页面组件。
• router 路由配置目录，去中心化之后的路由配置文件。
• untils 项目公用的 js 文件。
• App.vue 主应用程序组件，项目的根组件，所有组件都需要挂载到这个根组件上面。
• main.js 项目的核心入口文件，我们之前安装的插件也是在这个文件当中去进行引入和挂载，在这里面引入的插件我们就可以直接在整个项目中进行使用。

实验楼学习笔记https://www.shiyanlou.com/courses/1411