教你入门Vue的正确姿势

Paulahu
582 阅读5分钟

写在前面

很多前端新人都听过Vue.js这个前端框架，但是具体怎么开始使用Vue确很茫然。本文就是带大家一起来学习一下，如何正确地创建一个Vue的demo。

正文

第一步：安装@vue/cli

首先，什么是@vul/cli ？

image.png

Vue CLI官方文档告诉我们，这是Vue.js开发的标准工具，也就是Vue开发的命令行工具，你只需要按照官网敲几行命令就可以新建一个基本的vue项目框架，对开发者来说非常方便。
此外，@vul/cli 里面包含了webpack， 并且配置好了基本的webpack打包规则。

那么，如何安装呢？
同样是跟着官网走就好了。
首先打开你的命令行工具，或者是webstorm或VScode的控制台

npm install -g @vue/cli
# OR
yarn global add @vue/cli

判断是否安装成功：

vue --version

安装成功后，就可以创建一个Vue-demo了。

第二步：创建demo

输入以下命令创建一个项目：

vue create hello-world

下面就是选择一些配置，为了帮助新人更快上手，大家可以参考我的配置选项，如果觉得麻烦也可以直接用默认配置。

  • 第一步：选择自定义（上下键更换选项、回车键确认）

image.png

  • 第二步（空格键选择、回车键确认）

image.png

  • 第三步

image.png

  • 第四步

image.png

  • 第五步

image.png

  • 第六步

image.png

  • 第七步

image.png

  • 第八步

image.png

等待几分钟后，@vue/cli工具就帮你创建好一个demo了。
接着运行下面的代码：

cd hello-world
yarn serve

接下来会出现这个选项：

image.png

随意选择一个地址，如果网页出现如下的样式说明就创建成功了。
image.png

好了，关于@vue/cli我们就讲到这里，由于@vue/cli的功能也很丰富，大家可以去官网仔细浏览。
image.png

第三步：选择Vue的开发版本

使用Vue来开发的时候，我们需要考虑用哪种版本来开发。
Vue.js官网对两种不同构建版本的解释是这样子的：

  • 完整版：同时包含编译器和运行时的版本（编译器：用来将模板字符串编译为JS渲染函数的代码）
  • 运行时：用来创建Vue实例，渲染并处理虚拟DOM等的代码，基本上就是出去编译器的其它一切。
两种版本 UMD CommonJS 基于构建工具使用 直接用于浏览器
完整版 vue.js vue.common.js vue.esm.js vue.esm.browser.js
运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js


那么我们到底要选择哪种版本呢，请看下面的分析。
官网中给出的解释是：

image.png

我的结论是：

比较 完整版 运行时版 评价
特点 有compiler 没有 compiler 完整版体积较大，其中仅compiler就占整个文件40%大小
视图 写在HTML中或者写在template选项中 写在 render 函数里，用 h 来创建标签 h 是尤雨溪写好传给 render 的
CDN引入 vue.js vue.runtime.js 文件名不同，生成环境后缀为 .min.js
webpack 引入 需要配置 alias 默认使用此版本 尤雨溪所配置
@vue/cli 引入 需要额外配置 默认使用此版本 尤雨溪蒋豪群所配置

最佳实践：总是使用非完整版，然后配合vue-loader 和 vue 来进行使用。
思路：

  • 保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数。
  • 保证开发体验，开发者可直接在 vue 文件里面写 html 标签，而不写 h 函数
  • 脏活累活让 loader 做，vue-loader 把 vue 文件里面的 html 转为 h 函数。

第四步：引入运行时版本的Vue

可以使用cdn或npm引入，我们这里使用cdn引入。
打开bootCDN官网，搜索Vue，找到如下链接：

image.png

一般选择带有.min.js的版本（体积较小），插入到index.html中即可。

第五步：手写第一个demo

我们现在终于开始写第一个demo了。我们这次实现一个只有加一功能的app。
手写创建一个名为Demo.vue的文件，我们发现Vue的文件主要由三部分组成：

//视图
<template>
   
</template>

//视图外的其它选项
<script>
    export default {
        
    }
</script>

//css
<style scoped>

</style>

这里由于我们使用的是非完整版，因此把视图放在了js文件中。如果是完整版，视图可以放在html中或写成字符串。

下面开始写代码：

//视图
<template>
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>

//视图外的其它内容
<script>
    export default {
        data(){
            return{
                n:0
            }
        },
        methods:{
            add(){
                this.n += 1
            }
        }
    }
</script>

//css
<style scoped>
  .red {
    color: red;
}
</style>

然后我们在main.js中引入Demo.vue。

import Vue from 'vue'
Vue.config.productionTip = false
import Demo from "./Demo";

new Vue({
    el:'#app',
    render(h){
        return h(Demo)
    }
})

index.html只需要一个空的id为app的div元素即可。

<body>
   <div id="app"></div>
   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
</body>

补充一下：
main.js中的render函数起到的是一个渲染作用，它接收一个参数h（也就是创建一个元素），对这个节点进行一些列操作后再返回这个节点。

Trick

这里给大家提供一个快速生成Vue文件的方法。
可以使用codesandbox.io中的vue生成工具，具体请看下面的介绍：

  • 第一步

image.png

  • 第二步

image.png

  • 第三步

image.png

导出后就用webstorm或VScode打开就可以正常操作了。

总结

现在你可以自己尝试些一个demo了，相关的一些方法和插件可以去Vue.js官网查看，通过写demo的方式去了解每个功能的用法可以帮助你更好得掌握这个框架。

avatar
文章
阅读
粉丝