文章目录
参考
5. 前端工程化
5.1 vue-cli
-
vue create demo1 //使用vue-cli创建一个vue项目
-
vue init webpack vue-project //另一种方式 npm install //安装依赖
注:
- vue项目都是自带热部署的。
- 如果浏览器打开之后没有加载出页面,有可能是本地的8080端口被占用,此时需要修改一下配置文件config>index.js。
- 修改端口号是为了防止端口号被占用。
- 把assetsPublicPath属性前缀修改为“./”(原本为“/”),这是因为打包之后外部引入JS和CSS文件时,如果路径以“/”开头,在本地无法找到对应的文件(在服务器上没有问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。
5.2 项目的打包与发布
对vue项目进行打包
npm run build
5.2.1 使用静态服务器工具包发布打包
serve dist
5.2.2 使用动态web服务器(Tomcat)发布打包
-
打包
npm run build
-
将dist文件夹复制到Tomcat的webapps目录下,修改dist文件夹为项目名称
-
启动Tomcat,使用浏览器访问输出的地址(Tomcat默认端口号为8080)
5.3 Vue-devtools
在开发时经常要观察组件实例中data属性的状态,方便进行调试,但一般组件实例并不会暴露在window对象上,无法直接访问内部的data属性,若只通过debugger进行调试则效率太低。所以vue官方推出一款Chrome插件vue-devtools,vue-devtools是一款基于Chrome浏览器的插件,用于调试Vue应用,可以极大效率提高调试效率。
5.3.1 Vue-devtools安装
- 通过GitHub下载vue-devtools库
git clone https://GitHub.com/vuejs/vue-devtools
- 在vue-devtools目录下安装依赖包(耗时较长)
cd vue-devtools npm install
- 编译项目文件
npm run build
-
修改manifest.json文件,把"persistent":false改成"persistent":true。路径是:自定义路径\vue-devtools\shell\chrome>manifest.json。
-
使用谷歌浏览器在地址输入栏输入chrome://extensions/进入插件界面。单击“加载已解压的扩展程序”按钮,选择dev-tools>shells>chrome放入。
5.3.2 Vue-devtools的使用
当添加完Vue-devtools扩展程序后,在调试Vue应用的时候,打开F12,在Chrome开发者工具中会看到一个Vue栏,单击之后就可以看到当前页面Vue对象的一些信息。Vue是通过数据驱动的,这样就能看到对应的数据了,方便进行调试。
效果如下:
建议使用收藏猫插件下载。我用GitHub下载调试了很长时间最终失败了,收藏猫一分钟搞定。