松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › 最详细的基于webpack的Vue Hello World应用开发步骤

最详细的基于webpack的Vue Hello World应用开发步骤

迦娜王
3年前Vue
485 0 0

很多Vue的初学者想尝试这个框架时,都被webpack过于复杂的配置所吓倒,导致最后无法跑出一个期望的hello word效果。今天我就把我第一次使用webpack打包一个Vue Hello World应用的所有步骤详细记录下来,供Vue的初学者参考。

1. 安装nodejs和npm,这两个就不用说了,网上很多教程。

2. 本地随便新建一个文件夹,进入后运行命令npm init, 一路next下去,自动生成package.json。

运行命令npm install –save-dev webpack-dev-server,安装一个轻量级的服务器,该服务器用于vue应用开发完毕后的本地测试。

重复执行命令npm install –save-dev ,也就是把下列命令粘贴到cmd里进行执行:

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区域内,如下图红色区域所示:

最详细的基于webpack的Vue Hello World应用开发步骤

这些都是开发时依赖。我们再用下列命令安装运行时依赖:

npm install –save vue vuex

然后再在package.json里手动加入如下这一段内容:

最详细的基于webpack的Vue Hello World应用开发步骤

目的是开发完毕后,使用命令npm run dev可以启动webpack-dev-server,运行我们的vue应用,并带上参数–inline –hot。

3. 在项目文件夹根目录下创建一个名为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应用的开发和配置都结束了,是不是很简单?

我们可以来测试了。

4. 直接在命令行里敲webpack命令,就会自动执行打包操作,并在控制台上看到build.js文件成功生成的消息:

最详细的基于webpack的Vue Hello World应用开发步骤

这个打包后的文件尺寸很大,有323KB,包含了vue.js本身的内容和我们index.vue里的转换后的内容。下图高亮区域就是我们index.vue里的实现被webpack处理后生成对应的JavaScript代码。

最详细的基于webpack的Vue Hello World应用开发步骤

使用npm run dev启动webpack-dev-server,看到提示说在localhost:8080上可以访问我们的应用了。

最详细的基于webpack的Vue Hello World应用开发步骤

浏览器里访问,看到Hello World的输出,说明我们成功地走完了一个基于webpack的Vue应用开发流程。

最详细的基于webpack的Vue Hello World应用开发步骤

0
【Vue的路由,SPA概念】
上一篇
vue3框架设计精髓之Github很火的项目vue-design,学vue必须关注
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top