搭建VUE项目
1. 安装并初始化项目
Vue.js提供了一个官方命令行工具,可用于快速搭建大型的应用。
2. 运行并访问项目
项目启动成功,通过浏览器访问http://localhost:8080就可以看到项目的主页了。
3. 项目目录结构
刚初始化完成的项目目录以及作用:
4. 项目构建后打包到服务器
更改config/index.js文件,将两处assetsPublicPath
的值从/
改为./
,然后运行:
运行成功后目标文件会生成到dist
目录,然后放到目标服务器,以tomcat服务器为例,将dist整个目录放到webapps下面,启动tomcat然后访问http://localhost:8080/dist就OK了!
疑问1
按照官方教程可以很简单的搭建运行项目,但是VUE的运行原理是什么呢?资源文件如何加载的,如何编译的,主要加载了哪些文件,这些文件的对应关系又是什么?
作为一个后端小哥,对VUE真的不熟悉,在网上发现一个提问正好解决了我的疑问,https://segmentfault.com/q/1010000010792560,简单的说就是得先学习webpack(打包工具)才能解决这些疑问奥。
webpack简介
看了一些资料,简单介绍一下webpack,webpack是一个js应用程序的静态模块打包器,它实现的就是将程序的多个模块打包成1个或多个bundle。
webpack几个关键的概念如下:
入口:就是项目的一点,你可以理解为java或C的main函数;
输出:就是项目打包的路径,以及文件的命名;
loader:loader让webpack处理非js文件,因为webpack只能处理js,所以loader的作用就是将所有类型的文件转换为webpack能够处理的有效模块;
插件:就是扩展咯,给你无限想象。
Last updated