vue:使用webpack

版权声明:转载请注明出处 https://blog.csdn.net/fly_distance/article/details/86714149

一、webpack?

1、什么是webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,less,TypeScript等),并将其打包为合适的格式以供浏览器使用。

2、为什要使用WebPack
近几年来,前端领域发展迅速,前端的工作早己不再是切几张图那么简单,项目比较大时,可能会多人协同开发。模块化、组件化、 css 预编译等概念也成了经常讨论的话题 。
通常,前端自动化(半自动化〉工程主要解决以下问题:
• JavaScript 、 css 代码的合井和压缩 。
• css 预处理 : Less 、 Sass 、 Stylus 的编译。
• 生成雪碧图( CSS Sprite )。
• ES 6 转 ES 5.
• 模块化。
等等
这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。

3、webpack模块化示意图
参考下面的图片:
在这里插入图片描述
将复杂的文件结构最后整合成简单的,js、css、静态文件的结构。

二、使用webpack创建一个vue项目

在此列出了操作步骤:(具体细节不清楚可百度查看)
1、node -v检查有没有安装node,没有的话,安装
2、npm install -g vue-cli 安装脚手架
3、vue 查看有哪些指令(可以直接跳到第4步)
4、vue list 查看可用模板
5、vue init webpack my-project 通过模板创建项目(my-project名字随便取)
6、ls 查看当前目录下文件是否创建成功
7、cd xxx(创建的目录名) 进入当前目录
8、npm install 创建依赖的代码库node_modules
9、npm run dev 启动项目
10、本地浏览器会新打开一个窗口,地址是:localhost:8080

这是创建好的项目目录,仅做参考:
在这里插入图片描述
通过上面操作之后,会创建好一个vue项目,接下来我们只需要enjoy coding就行了。

猜你喜欢

转载自blog.csdn.net/fly_distance/article/details/86714149