导航：首页 > 开发技术 >

Vue Hello World应用的开发步骤

发表于：2024-10-18 作者：千家信息网编辑

千家信息网最后更新 2024年10月18日，本篇内容主要讲解"Vue Hello World应用的开发步骤"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"Vue Hello World应用的开发步骤"

千家信息网最后更新 2024年10月18日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，也就是把下列命令粘贴到cmd里进行执行：

npm install -save-dev css-loadernpm install -save-dev vue-template-compilernpm install -save-dev webpacknpm install -save-dev vue-loadernpm 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，把如下内容拷贝进去：

再回到根目录下，新建一个文件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

我们注意到这个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应用的开发和配置都结束了，是不是很简单？

我们可以来测试了。