vue之vue-cli

一.简介

cli(Command-Line Interface)翻译为命令行界面,俗称脚手架.
使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置
使用前提: node、webpack

二.cli安装

1. 全局安装vue-cli v3

npm install -g @vue/cli

2. 新版本拉取旧版本模板(桥接工具)

npm install -g @vue/cli-init

安装桥接工具后便可使用vue init webpack my-project搭建旧版本项目

三.使用

1. 搭建项目

通过使用vue命令,快速搭建一个项目

# 脚手架2及以前版本
vue init webpack my-project
# 脚手架3开始
vue create my-project

2. 构建原型

通过使用vue命令,构建一个项目原型

vue serve

3. 界面管理项目

通过使用vue命令,打开管理界面,管理所有vue项目

# 脚手架3开始
vue ui

四.项目目录

1.配置目录:

配置文件目录:build和config,vue-cli3+开移除了build和config(0配置)
vue-cli3+查看/修改配置的方式:

• 启动配置服务器查看/修改:

vue ui

• 找到配置文件查看
  到node_modules下的@vue的cli-service中的webpack.config.js文件
• 在项目目录下添加配置文件修改
  项目根目录下添加vue.config.js(名称固定)配置文件,手动书写的配置会跟默认配置合并

2.资源文件目录:

资源文件目录:src

3.静态资源文件目录:

静态资源文件:static,vue-cli3+移除了static,新增了public目录存放静态资源,并且index.html也移入到public目录中

五.runtime-compile和runtime-only

1.runtime-compile

app先在components中注册,再在template中使用

import Vue from 'vue';
import App from './App';
Vue.config.productionTip = false;
new Vue({
	el: '#app',
	template: '<App/>,
	components: { App }
});

2.runtime-only

app直接在render中使用

import Vue from 'vue';
import App from './App';
Vue.config.productionTip = false;
new Vue({
	el: '#app',
	render: h => h(App)
});

3.原因:

• vue的处理过程:
  template—解析—>ast—>编译—>render------>virtual dom------>UI
• 第二种方式的效率更高,代码量更少
• 核心函数:
  createElemet----->简写为h

createElement的用法:

1. 普通用法:createElement(‘标签名’, {标签属性}, [标签内容]);标签内容可以有多个,也可以传一个createElement函数;标签属性可以省略
2. 进阶用法:createElement(‘组件名称’)

$日期：2021-11-08$