VUE学习-脚手架cli

考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情

使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置

安装VUE脚手架

npm install -g @vue/cli

拉取2.x模板

npm install -g @vue/cli-init

VUE-CLI2

初始化一个项目

vue init webpack my-project

之前可以创建，现在试了很多次报错，试了网上很多解决办法无效，还是直接使用cli3了。。。

vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET

目录结构

runtime-complier和runtime-only的区别

区别只在main.js中

runtime-compiler

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

runtime-only

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

vue程序运行过程

template -> ast(抽象语法树) -> render（functions） -> virtual dom -> UI

runtime-complier

• template -> ast(抽象语法树) -> render（functions） -> virtual dom -> UI
• 代码量更多

runtime-only（推荐）

• render（functions） -> virtual dom -> UI
• 性能更高
• 代码量更少

runtime-complier改造

new Vue({
    el: '#app',
    // template: '<App/>',
    // components: { App }
    render: function(createElement) {
        // return createElement(App);
        // 普通用法
        // createElemet('标签', {标签的属性}, ['标签的内容'])
        // return createElement('h2', { class: 'box' }, ['hello world']);
        // return createElement('h2', { class: 'box' }, ['hello world', createElement('button', ['按钮'])]);
        // 传入组件对象
        return createElement(App);
        // App已经是一个object对象，具有render方法
        // vue-template-complier已经处理了从tempate->ast的过程
    }
})

VUE-CLI3

vue-cli3与vue-cli2的区别

• vue-cli3是基于webpack 4打造，vue-cli2还是webpack 3
• vue-cli的设计原则是0配置，移除配置文件根目录下的，build和config等目录
• vue-cli3提供了vue ui命令，提供了可视化的配置，更加人性化
• 移除static文件夹，新增了public文件夹，并且index.html移动到public中

初始化一个项目

vue create my-project

目录结构

main.js

new Vue({
  render: h => h(App),
}).$mount('#app')
// createApp(App).mount('#app') 手动挂载

配置文件的查看与修改

• vue ui 查看配置与修改

• 查看配置文件

  node-modules -> @vue -> cli-service->webpack.config.js

  lib -> service.js

• 修改配置文件

  • 根目录下创建vue.config.js (文件名不能变),会自动和默认配置合并

    module.exports = {
    	
    }