cli
(Command-Line Interface
)翻译为命令行界面,俗称脚手架.
使用vue-cli
可以快速搭建Vue
开发环境以及对应的webpack配置
使用前提: node
、webpack
cli
安装vue-cli v3
npm install -g @vue/cli
npm install -g @vue/cli-init
安装桥接工具后便可使用vue init webpack my-project
搭建旧版本项目
通过使用vue
命令,快速搭建一个项目
# 脚手架2及以前版本
vue init webpack my-project
# 脚手架3开始
vue create my-project
通过使用vue
命令,构建一个项目原型
vue serve
通过使用vue
命令,打开管理界面,管理所有vue项目
# 脚手架3开始
vue ui
配置文件目录:build
和config
,vue-cli3+
开移除了build
和config
(0配置)
vue-cli3+
查看/修改配置的方式:
vue ui
node_modules
下的@vue
的cli-service
中的webpack.config.js
文件vue.config.js
(名称固定)配置文件,手动书写的配置会跟默认配置合并资源文件目录:src
静态资源文件:static
,vue-cli3+
移除了static
,新增了public
目录存放静态资源,并且index.html
也移入到public
目录中
runtime-compile
和runtime-only
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 }
});
runtime-only
app
直接在render
中使用
import Vue from 'vue';
import App from './App';
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App)
});
vue
的处理过程:template
—解析—>ast
—>编译—>render
------>virtual dom
------>UI
createElemet
----->简写为h
createElement的用法:
- 普通用法:createElement(‘标签名’, {标签属性}, [标签内容]);标签内容可以有多个,也可以传一个createElement函数;标签属性可以省略
- 进阶用法:createElement(‘组件名称’)
日 期 : 2021 − 11 − 08 \color{#00FF00}{日期:2021-11-08} 日期:2021−11−08