vue-cli脚手架的使用

  • 使用vue-cli可以快速搭建vue的开发环境,和webpack的配置
  • 安装vue脚手架: npm install -g@vue/cli
  • 上面安装的是vue cli3的版本,如果需要想按照vue cli2的方式初始化项目是不可以的,我们必须要拉取2.x的模板,需要安装全局的桥接工具(官方查看)
  • Vue CLI2 初始化项目
    • vue init webpack my-project
  • Vue CLI3 初始化项目
    • vue create my-project

CLI 2 的使用

  1.  初始化项目:web init webpack mytest(根据这个创建项目文件名),初始化出现配置选项:
    //项目名称
    Project name ...
    //作者的信息,会默认从git中读取信息
    Project description ...
    Author ...
    //vue创建的选项 1.runtime-compiler 2.runtime-only
    vue build ...(一般选runtime-only)
    //是否安装vue-router
    Install vue-router? ..
    //是否使用ESLint检测代码规范
    use ESLint to link your code
    //是否写单元测试 (一般不使用)
    Set up unit tests
    //是否使用Nightwatch来进行e2e测试 (2代表to e to e 点对点)
    Setup e2e test with Nightwatch?
    //使用npm或者yarn包管理工具
    use npm
    use yarn
  2. Runtime-CompilerRuntime-only的区别

  • runtime-compiler(v1)(运行过程)): template -> ast -> render -> vdom -> UI
  • runtime-only(v2 1.性能更高, 2.代码量更少):render -> vdom -> UI
  • 那.vue文件中的template是由谁处理的呢? 是由vue-template-compiler这个开发时 工具依赖来处理的,他将.vue文件解析成了render函数,解析之后,是没有tamplate这个 东西的
  1. 总结:
  • 如果在开发中,依然使用template,就需要选择Runtime-Compiler
  • 如果在开发中,使用的是.vue文件夹开发,那么可以选择Runtime-Only
  1. render函数的使用
  •   new Vue({
    el:'#app',
    render:(createElement) =>{
    //使用方式一:
    return createElement('标签','相关数据对象(可以不传)',['内容数组'])
    //1.1render函数的基本使用
    return createElement('div',{class:'box'},['xiaohuang'])
    //1.2嵌套render函数
    return createElement('div',{class:'box'},['小黄',createElement('h2',['标题啊'])])
    }
    })
  •   `Runtime-Compiler`和`Runtime-only`在main.js中的不同使用:
    
      1.`Runtime-Compiler`中
    const cpn =Vue.component('cpn',{
    template:'<div>我是cpn组件 </div>',
    data(){
    return{ }
    }
    }) 2.`Runtime-only`中
    new Vue({
    el:'#app'
    render:(createElement)=>{
    //使用方法二:传入一个组件对象
    return createElement(cpn)
    }
    })

CLI 3的使用

  1. 初始化项目:vue create my-project
  2.  //选择一个配置方式
    please pick a perset (一般选最后一个Manually select features(手动选择特性) )
    //选择对于你的工程所需要的特性 (用空格选择)
    check the features needed for your project
    //对应的配置文件单独生成还是放在package.json里
    where do you prefer placing config for babel
    //要不要把刚才自己选择的配置保存下来
    save this as a preset for future projects?
  3. pubilc文件相当于CLI2中的static目录
  4. 配置都去哪里了,可以启动配置服务器 vue ui 查看(全局命令)

vue-cli2和cli3的使用和区别的更多相关文章

  1. Vue与React两个框架的区别对比

    简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...

  2. vue中extend/component/mixins/extends的区别

    vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸

  3. vue路由传值params和query的区别

    vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...

  4. vue/cli2.0优化

    vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...

  5. vue中methods、computed、watch区别

    vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...

  6. vue中的$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  7. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  8. Vue CLI3和Vue CLI2环境搭建

    关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...

  9. Vue 中 export及export default的区别

    相信很多人都在vue使用过export.export default.import,然而它们到底有什么区别呢? 在ES6中,export与export default均可用于导出常量.函数.文件.模块 ...

随机推荐

  1. python通过人脸识别全面分析好友,一起看透你的“朋友圈”

    微信:一个提供即时通讯服务的应用程序,更是一种生活方式,超过数十亿的使用者,越来越多的人选择使用它来沟通交流. 不知从何时起,我们的生活离不开微信,每天睁开眼的第一件事就是打开微信,关注着朋友圈里好友 ...

  2. VueCLi3 配置less变量

    Step1. 文档介绍 // vue-cli css预处理文档: https://cli.vuejs.org/zh/guide/css.html#自动化导入 // less文档: https://ww ...

  3. 4.Android-adt安卓打包过程、adb指令学习

    本章学习adt安卓打包过程.adb指令学习.并通过adb将打包的APK发给设备 1.打包 在eclipse中已经帮我们实现打包了. 具体打包流程如下: 最终一个APK包含了如下: classes.de ...

  4. Python 中国象棋源码 V1

    Pygame 做的中国象棋,一直以来喜欢下象棋,写了 python 就拿来做一个试试,水平有限,电脑走法水平低,需要在下次版本中更新电脑走法,希望源码能帮助大家更好的学习 python.总共分为四个文 ...

  5. OD 快捷方式及窗口说明

    OD 快捷方式 其他窗口 L : log 保存日志信息 E :程序的所有模块的信息(加载基址,大小,OEP,路径) M :程序的内存映射视图 T :线程信息 W :窗口信息 H :句柄表 C :CPU ...

  6. ruby中的多线程和函数的关键字传参

    1.实现ruby中的多线程 # def test1 # n = 1 # if n > 10 # puts "test1结束" # else # while true # sl ...

  7. PlayJava Day022

    List接口: ArrayList:数组集合,底层使用数组,查询快,增删慢 LinkedList:链表集合,底层使用链表形式,查询慢,增删快 注意: 对于随机访问get和set,ArrayList优于 ...

  8. useradd命令详解(转)

    1.作用 useradd或adduser命令用来建立用户帐号和创建用户的起始目录,使用权限是超级用户. 2.格式 useradd [-d home] [-s shell] [-c comment] [ ...

  9. 如何使用CAD删除命令?怎么删除图纸中线段

    大家经常使用CAD制图软件来绘制图纸,那在绘制图纸的过程中有时候会出现一些问题,就是图纸中不小心多绘制了一个线段,那要怎么办呢?如何使用CAD删除命令?怎么删除图纸中线段呢?那下面小编就来教教大家具体 ...

  10. Angular-----代码风格指南!!!(很重要)

    一:文件结构 1).单一规则:坚持每个文件只定义一样东西(例如服务或组件),考虑把文件大小限制在 400 行代码以内. 单组件文件非常容易阅读.维护,并能防止在版本控制系统里与团队冲突: 单组件文件可 ...