扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编这次要给大家分享的是Vue如何实现单文件组件开发，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。
第一步：配置环境
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装@vue/cli
cnpm install -g @vue/cli
检查版本是否正确
vue --version
使用vue.server和vue.build对*.vue文件进行快速原型开发，需要安装vue serve
cnpm install -g @vue/cli-service-global
新建一个App.vue文件测试安装是否成功：
2 Hello world!
3
在该文件当前路径运行：
vue serve App.vue
打开浏览器输入localhost:8080看到如下画面则运行成功
环境安装到此结束，接下来用一个简单案例来学习vue的单文件组件开发。
第二步：简单案例实战
以一个物品清单为例：
该案例由4个组件构成，分别是：
1. addItem.vue 添加物品
2. item.vue 物品实例
3. items.vue 物品列表
4. changeTitle 改变标题
首先，创建一个项目demo：
vue create demo
项目默认目录如下，启动主页在public， vue源码(包括组件)都存放到src
然后分别编写各组件代码
1. addItem.vue：
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网