VueHelloWorld应用的开发步骤-创新互联
本篇内容主要讲解“Vue Hello World应用的开发步骤”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue Hello World应用的开发步骤”吧!
安装nodejs和npm,这两个就不用说了,网上很多教程。
本地随便新建一个文件夹,进入后运行命令npm init, 一路next下去,自动生成package.json。
运行命令npm install –save-dev webpack-dev-server,安装一个轻量级的服务器,该服务器用于vue应用开发完毕后的本地测试。
重复执行命令npm install –save-dev
npm install –save-dev css-loader npm install –save-dev vue-template-compiler npm install –save-dev webpack npm install –save-dev vue-loader npm install –save-devvue-router
参数-save-dev的效果是让这些安装的module出现在package.json的devDependencies区域内,如下图红色区域所示:
这些都是开发时依赖。我们再用下列命令安装运行时依赖:
npm install –save vue vuex
然后再在package.json里手动加入如下这一段内容:
目的是开发完毕后,使用命令npm run dev可以启动webpack-dev-server,运行我们的vue应用,并带上参数—inline —hot。
在项目文件夹根目录下创建一个名为src的文件夹,文件夹里新建一个文件index.vue,把如下内容拷贝进去:
Jerry: Hello, World!
再回到根目录下,新建一个文件main.js:
import Vue from 'vue'; import AppJerry from './src/index.vue' new Vue({ el: "#demo", components: { app: AppJerry } });
这段代码首先将我们在src文件夹的index.vue里实现的应用导出,存储到变量AppJerry里,再将这个应用安装到html页面id为demo的div标签里。安装是通过创建Vue实例并将div元素的id传入构造函数里进行的。当然,我们还没创建html文件,所以马上创建一个名为index.html的文件:
hello world