Vue-cli搭建项目基础框架

最新推荐文章于 2024-05-16 13:10:03 发布

Zaralike

最新推荐文章于 2024-05-16 13:10:03 发布

阅读量173

点赞数

分类专栏：前端文章标签： vue.js node.js vue-cli3

本文链接：https://blog.csdn.net/Zaralike/article/details/120024212

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

CLI(Command-Line Interface，命令行界面)，Vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。

NPM(Node Package Manager)，NodeJS包管理和分发工具

//webpack全局安装
npm install webpack -g

Vue CLI的使用

安装Vue脚手架：

npm install -g @vue/cli

拉取2.x模板：

npm install -g @vue/cli-init

Vue CLI2初始化项目

vue init webpack 项目名称

Vue CLI3初始化项目

vue create 项目名称

runtimecomplier和runtimeonly区别：

//runtimecomplier  main.js
import Vue from 'Vue'
import App from './App'

Vue.config.productionTip=false

new Vue({    
    el:'#app',
    template:'<App/>',
    components:{App}    
})

//程序运行过程：template->ast(abstract syntax tree抽象语法树)-> render->vdom->UI

//runtimeonly  main.js
import Vue from 'Vue'
import App from './App'

Vue.config.productionTip=false

new Vue({
    el:'#app',
    render:h=>h(App)    //render:function(h){return h(App)}
})

//程序运行过程：render->vdom->UI

runtime-complier(v1)

runtime-only(v2)：性能更高；代码量更少

Vue CLI3