确保npm已安装
一. 项目创建
1. vue-cli:vue脚手架,提供好基本项目结构
npm install vue-cli -g //安装vue命令环境
验证是否安装成功,可执行命令:vue –version
2.生成项目模板
本身集成很多项目模板:
simple 基本没用
webpack 适合大型项目;Eslint 检查代码规范;单元测试
webpack-simple 没有代码检查
这里使用webpack
vue init webpack test1
一路按回车即可
3.进入到生成目录里,安装依赖,并运行项目
cd test
npm install //如果选择的模版是“webpack”,不需要执行该命令
npm run dev
然后复制里面的http://localhost:8082,用浏览器打开。如下,即代表项目创建成功。
二. vue项目打包
1. 打包
npm run build
如下代表打包成功。打包后会生成dist文件夹,只需要里面的文件。
三. vue项目打包出现的问题
1. 点击dist/index.html,运行。页面会空白且报错。如图
修改,项目根目录下config/index.js,修改一处,如下图。
之后,删除dist文件夹,重新打包npm run build,就ok了。
2.vue项目打包后css背景图路径不对的问题
解决办法为:只需要在build/utils.js文件中添加如下一行代码即可。
publicPath:'../../'
此外,如果页面出现空白,或者图片找不到,可能是路径的问题。