一.简介
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的用法:
- 普通用法:createElement(‘标签名’, {标签属性}, [标签内容]);标签内容可以有多个,也可以传一个createElement函数;标签属性可以省略
- 进阶用法:createElement(‘组件名称’)
日 期 : 2021 − 11 − 08 \color{#00FF00}{日期:2021-11-08} 日期:2021−11−08