Vue Hello World应用的开发步骤
本篇内容主要讲解“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,把如下内容拷贝进去:
<style> h3{ color: red; } </style> <template> <h3>Jerry: Hello, World!</h3> </template> <script> module.exports = { data: function(){ return {}; } } </script>
再回到根目录下,新建一个文件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的文件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <div id="demo"> <app></app> </div> <script src="dist/build.js"></script> </body> </html>
我们注意到这个index.html里引用了一个dist/build.js的文件,这个文件用来干嘛的?
这里就不得不提webpack在现代前端开发技术中起的重要作用了。WebPack可以看做是模块打包机:它做的事情是,分析我们的前端项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言,比如Scss,TypeScript等,并将其打包为合适的格式以供浏览器使用。具体到我们这个例子,就是说webpack把我们src文件夹下的index.vue打包转换成浏览器能识别的js文件,webpack的输出就是dist文件夹下的build.js文件。
为了让webpack清楚地知道它要完成什么样的任务,我们通过创建一个配置文件webpack.config.js来完成webpack任务指定。
这个配置文件的内容:
var path = require('path'); module.exports = { entry: './main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, module: { loaders: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.(png|jpg|eot|svg|ttf|woff)/, loader: 'url?limit=40000' } ] } }
里面定义了webpack执行任务的入口是main.js文件,任务输出的文件夹是项目文件夹里的dist目录,输出文件是build.js, webpack扫描的文件通过vue-loader指定,特征是以.vue结尾的文件。
到目前为止,这个基于Vue的hello world应用的开发和配置都结束了,是不是很简单?
我们可以来测试了。
直接在命令行里敲webpack命令,就会自动执行打包操作,并在控制台上看到build.js文件成功生成的消息:
这个打包后的文件尺寸很大,有323KB,包含了vue.js本身的内容和我们index.vue里的转换后的内容。下图高亮区域就是我们index.vue里的实现被webpack处理后生成对应的JavaScript代码。
使用npm run dev启动webpack-dev-server,看到提示说在localhost:8080上可以访问我们的应用了。
浏览器里访问,看到Hello World的输出,说明我们成功地走完了一个基于webpack的Vue应用开发流程。
到此,相信大家对“Vue Hello World应用的开发步骤”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!