Vue如何实现单文件组件开发-创新互联

小编这次要给大家分享的是Vue如何实现单文件组件开发，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

创新互联专业提供成都主机托管四川主机托管成都服务器托管四川服务器托管，支持按月付款！我们的承诺：贵族品质、平民价格，机房位于中国电信/网通/移动机房，温江服务器租用服务有保障！

第一步：配置环境

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装@vue/cli

cnpm install -g @vue/cli

检查版本是否正确

vue --version

Vue如何实现单文件组件开发

使用vue.server和vue.build对*.vue文件进行快速原型开发，需要安装vue serve

cnpm install -g @vue/cli-service-global

新建一个App.vue文件测试安装是否成功：

在该文件当前路径运行：

vue serve App.vue

打开浏览器输入localhost:8080看到如下画面则运行成功

Vue如何实现单文件组件开发

环境安装到此结束，接下来用一个简单案例来学习vue的单文件组件开发。

第二步：简单案例实战

以一个物品清单为例：

Vue如何实现单文件组件开发

该案例由4个组件构成，分别是：

1. addItem.vue 添加物品

2. item.vue 物品实例

3. items.vue 物品列表

4. changeTitle 改变标题

首先，创建一个项目demo：

vue create demo

项目默认目录如下，启动主页在public， vue源码(包括组件)都存放到src

Vue如何实现单文件组件开发

然后分别编写各组件代码

1. addItem.vue：

分享标题：Vue如何实现单文件组件开发-创新互联
标题链接：http://cqcxhl.cn/article/dpgdej.html

Hello world!