vue 回车_教你入门Vue的正确姿势

最新推荐文章于 2024-06-08 10:27:47 发布

weixin_39968490

最新推荐文章于 2024-06-08 10:27:47 发布

阅读量145

点赞数

写在前面

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

正文

第一步：安装@vue/cli

首先，什么是@vul/cli ？

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

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

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

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

第三步

第四步

第五步

第六步

第七步

第八步

等待几分钟后，@vue/cli工具就帮你创建好一个demo了。

接着运行下面的代码：

cd hello-world
yarn serve

接下来会出现这个选项：

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

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

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

使用Vue来开发的时候，我们需要考虑用哪种版本来开发。

Vue.js官网对两种不同构建版本的解释是这样子的：

完整版：同时包含编译器和运行时的版本（编译器：用来将模板字符串编译为JS渲染函数的代码）
运行时：用来创建Vue实例，渲染并处理虚拟DOM等的代码，基本上就是出去编译器的其它一切。

那么我们到底要选择哪种版本呢，请看下面的分析。

官网中给出的解释是：

我的结论是：

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

思路：

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

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

可以使用cdn或npm引入，我们这里使用cdn引入。

打开bootCDN官网，搜索Vue，找到如下链接：

一般选择带有.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生成工具，具体请看下面的介绍：

第一步

第二步

第三步

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

总结

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

weixin_39968490

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 回车_教你入门Vue的正确姿势

写在前面很多前端新人都听过Vue.js这个前端框架，但是具体怎么开始使用Vue确很茫然。本文就是带大家一起来学习一下，如何正确地创建一个Vue的demo。正文第一步：安装@vue/cli首先，什么是@vul/cli ？Vue CLI官方文档告诉我们，这是Vue.js开发的标准工具，也就是Vue开发的命令行工具，你只需要按照官网敲几行命令就可以新建一个基本的vue项目框架，对开发者来说非常方便。此外...
复制链接

扫一扫