vue(七) - Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，称为脚手架工具。

特点:

1. 统一项目的架构风格。

2. 初始化配置项目依赖。

3. 提供单文件组件。

操作方式：命令行工具

安装

安装:

npm install –g @vue/cli

升级:

npm update –g @vue/cli

检查是否安装成功:

vue --version

项目搭建

1. 创建项目：

vue create project-demo

2. 选择预设:

• 前两个的区别主要在于vue 2和vue3, 选好后点击回车

手动选择:

• 这里点击空格选中/取消

这里自己设置命名的预设会保存在计算机的C:\Users\当前用户名的.vuerc文件中, 如果不需要可以删除它, 下次创建项目的时候就不会有这个预设的选项了.

git这里选择"是"就可以了

3. 创建完成

目录与文件

文件目录介绍：

单文件组件

• 单文件组件可以将组件的功能(模板, 视图, 逻辑)统一保存在以 .vue 为扩展名的文件中。

1. template对应当前组件的结构/模板, 也就是以前组件的template属性, 内部可以使用插值表达式等语法来操作.

2. script是关于组件的一些功能. 这里采用的是export default是ES6里提供的module, 通过这种方式进行模块导出, 导出的对象就是当前组件的配置对象.

• name是当前组件的名称, 与文件名相同就可以了
• props是外部组件传递的一些数据
• 后面也可以设置一些data,methods之类的

3. style是样式 scoped设置这些样式只对当前组件有效

导入组件:

如果想使用其他组件, 需要进行导入, 导入的方法如图:

创建的项目中App.vue是项目的根组件, 也就是根实例. 但它内部却没有new Vue({})这种创建根实例的方法, 这是因为vue-cli把这部分放到了main.js中.

• Vue.config.productionTip = false 是生产阶段的错误提示, 如果是开发阶段可以设成true, 上线后最好设为false.

• h是vue内部的用来给组件创建dom的一个函数, 把App传入h函数中就会得到一段dom结构, 设置给render. 然后render就会渲染这个结构, 就会实现入口文件和根组件相分离的一种设置方式. 可以理解为是一种固定的形式, 不需要更改.

单文件组件与传统方式的区别

1. 现在使用<template>, 支持高亮等, 更加方便

2. 包含css, 内置性更高, 可维护性更强.

3. vue-cli内部集成了一些预处理器, 可以只用less在<style>位置直接书写.

打包与部署

打包

打包就是将 Vue CLI 项目编译为浏览器可识别的文件。

npm run build

会生成一个新的文件夹:

部署

部署指的是将 Vue 项目dist 目录部署到服务器上。

安装静态文件服务器：

npm install –g serve

在 dist 下通过 serve 命令部署(两种方式):

方式一

先进入dist文件夹, 然后输入serve

方式二

先输入serve再输入文件夹名称dist