Vue学习笔记[11]-Vue-CLI

Vue CLI (Command-Line Interface)为Vue命令行界面，也成为脚手架，它是一个官方的vue.js项目脚手架，使用cli可以快速搭建Vue开发环境和对应的webpack配置。
Vue-CLI也需要node，webpack的支持

安装Vue-CLI 3

npm install -g @vue/cli

创建项目:

vue create [项目名称]

的runtime compiler 和runtimeonly在main.js中的区别

runtime only比runtime compiler 体积小并且会更加高效

• runtime compiler:

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

• runtime only

//cli3.
new Vue({
  el:'#app',
  render: h => h(App)//传入组件对象
})

//cli4.
new Vue({
  render: function (h) { return h(App) },
}).$mount('#app')

这里的h实际上是createElement('标签',{标签的属性},[内容])

Vue程序运行的过程:

template首先会被解析成抽象语法树(AST),在编译成render函数,再转换成虚拟DOM,在渲染成真实UI

 var options = this.$options;
    // resolve template/el and convert to render function
    if (!options.render) {
      var template = options.template;
      if (template) {
        if (typeof template === 'string') {
          if (template.charAt(0) === '#') {
            template = idToTemplate(template);
            /* istanbul ignore if */
            if (!template) {
              warn(
                ("Template element not found or is empty: " + (options.template)),
                this
              );
            }
          }
        } else if (template.nodeType) {
          template = template.innerHTML;
        } else {
          {
            warn('invalid template option:' + template, this);
          }
          return this
        }
      } else if (el) {
        template = getOuterHTML(el);
      }
      if (template) {
        /* istanbul ignore if */
        if (config.performance && mark) {
          mark('compile');
        }

        var ref = compileToFunctions(template, {
          outputSourceRange: "development" !== 'production',
          shouldDecodeNewlines: shouldDecodeNewlines,
          shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
          delimiters: options.delimiters,
          comments: options.comments
        }, this);
        var render = ref.render;
        var staticRenderFns = ref.staticRenderFns;
        options.render = render;
        options.staticRenderFns = staticRenderFns;

        /* istanbul ignore if */
        if (config.performance && mark) {
          mark('compile end');
          measure(("vue " + (this._name) + " compile"), 'compile', 'compile end');
        }
      }
    }
    return mount.call(this, el, hydrating)
  };

目录结构

vue CLI3以后隐藏了关于webpack的配置,如果想更改这些信息,需要在目录下添加vue.config.js来复写webpac相关配置.

//vue.config.js
module.exports = {...}

启动vue ui服务来更改详细配置:

vue ui