笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

Vue Cli

简介

官网地址：Vue CLI (vuejs.org)

是一个基于vue进行快读开发的完整系统，称为脚手架工具

统一项目架构风格
初始化配置项目依赖
提供单文件组件（ .vue文件）

开发vue项目建议使用，小练习不建议使用

本质上基于webpack，简化webpack，本质上就是webpack

操作方式：命令行工具 - 通过命令

安装

安装命令：(sudo) npm i -g @vue/cli - 全局安装

升级命令：(sudo) npm update -g @vue/cli

项目搭建

创建项目：vue create 项目名 ，(可能会提示是否使用taobao源)
选择预设功能 - preset：一般都选择手动选择功能，选择之后可以自选想安装的依赖、配置
选择项目包管理器：
创建完成
运行项目：进入目录，然后npm run server运行项目

创建项目中间可以点击ctrl+c停止操作，我们选择自定义选择功能可以保存起来配置，下次`vue create的时候可以使用，如果想更改，百度吧老师用的windows

目录文件结构

核心目录

根目录
- public - 预览文件目录
- src
  - assets - 静态资源目录
  - components - 项目组件目录
  - app.vue - 根组件
  - Main.js - 入口文件

完整目录结构

根目录
- node_modules - 依赖包目录，内部存放项目依赖的包
- public - 预览文件目录，预览项目时查看的主页面
- src - 资源目录
  - assets - 静态资源目录，内部存放资源文件，例如图片、json、音视频等
  - components - 项目组件目录，内部存放所有组件
  - App.vue - 根组件，相当于之前使用的根实例
  - Main.js - 入口文件
- .gitignore - git插件帮我们创建的，可用来忽略node_modules内容
- babel.config.js - 关于babel配置文件
- package-lock.json - npm文件
- package.json - npm文件
- README.md - 信息文件，可以书写文档信息

单文件组件

单文件组件将组件的功能统一保存在.vue文件中，每个单文件组件都是一个模块

组件中可大致分为三块结构（包括根组件），分别为

template - 模版，对应之前设置组件时候的template属性，语法和之前相同
script - 组件的一些功能，使用export default导出模块，name为导出名，和文件名相同即可
style - 样式，设置scoped可以让样式只能在当前组件生效

在单组件内部script中可以使用props接收参数

根组件

根文件中想要使用组件需要先引入组件，在script中操作，import 组件名 from '路径'
将组件名插入到vue的components中components: { 组件名}
在顶部template中使用组件，这里使用单标签即可，标签内可以传参<组件名参数名="参数内容"/>

可以发现我们的根组件中并没有new vue实例，其实这是因为我们的new在入口文件main.js中

main.js

// main.js文件

// 引入vue
import Vue from 'vue'
// 引入根组件
import App from './App.vue'

// 配置项：关于生产提示，让上线的项目不进行错误提示
Vue.config.productionTip = false

// 创建vue实例
new Vue({
  // 使用render方法，参数 h 是 vue 内部的，用于给组件创建 Dom 的函数
  render: h => h(App),
}).$mount('#app') //采用$mount进行挂载，对应public -> index.html文件中的app

// reder最终根据app组件的配置信息返回dom结构，最终插入到 #app 中

打包和部署

打包

把vue中的文件编译为浏览器可识别的html、css、js文件的过程

命令：npm run build

打包结果会存在根目录下的dist目录中，只是输出目录，我们要修改项目内容不要在这个文件夹修改

部署

将vue项目的dist目录部署到服务器上

dist中的文件需要使用http协议来打开，所以不能使用双击打开文件的方式运行，这里使用node提供的静态文件服务器

安装：(sudo) npm i -g -serve
在dist目录下通过serve命令或者使用serve 相对路径进行部署

part5 - 模块2 - 03- Vue cli