Please enable JavaScript.

Coggle requires JavaScript to display documents.

vue-cli - Coggle Diagram

- - - - 开发大型项目更为方便
      - 帮助搭建项目结构
    - - 翻译为为命令行界面，俗称脚手架，使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置
  - - - 准备
        
        安装8.x以上的node和webpack（无指定版本）
      - 指令
        
        npm i -g vue/cli（脚手架3）
        
        Project name ：项目名称（不能包含中文）
        
        Author（作者）： (卢南琪<213722921@qq.com>)
        
        Vue build ：使用runtime-only还是runtime-compiler
        
        Install vue-router? :是否安装路由
        
        Use ESLint to lint your code?：是否使用语法规范（在编译代码时报错）
        
        Set up unit tests：是否使单元测试
        
        Setup e2e tests with Nightwatch?：是否使用e2e测试
      - 创建文件
        
        build和config文件：webpack相关配置
        
        node_modules：依赖的node相关的模块
        
        src文件：以后写代码的地方
        
        .babelrc：ES代码相关转化配置
        
        .editorconfig：项目文本相关配置
        
        .gitignore：git仓库忽略的文件夹配置
        
        .postcssrc.js：css相关转化的配置
  - - - 先在components进行组件注册，后在template中使用
      - 代码
        
        new Vue({
        
        el: '#app',
        
        components: { App },
        
        template: '<App/>'
        
        })
      - 解析过程
        
        template
        
        ast
        
        render
        
        vdom
        
        UI
    - - 使用render（渲染）函数
        
        // 1、普通用法
        
        //render: function (createElement) {
        
        // return createElement('p', {class: 'box'}, ['hello world',createElement('button',['按钮'])])
        
        // }
        
        //2、传入组件对象：没有template需要编译
        
        //runtime-only就是将app组件直接传入，由vue-template-complier处理.vue文件中的template
        
        // render:function(createElement){
        
        // return createElement(cpn)
        
        // }
      - 代码
        
        new Vue({
        
        el: '#app',
        
        render:function(h){
        
        return h(App) }
        
        })
      - 解析过程
        
        render
        
        vdom
        
        UI
      - 优点
        
        性能更好
        
        代码量更少
- - - - cmd
        
        vue create 项目名称
  - - - 在任意cmd的目录下执行：vue ui
      - 在打开的页面中选择导入/创建项目