1、安装Node环境
可以参考菜鸟教程安装步骤:https://www.runoob.com/nodejs/nodejs-install-setup.html
2、搭建vue-cli环境
1、全局安装vue-cli
npm install vue-cli -g
2、进入你的项目目录,创建一个webpack模板项目
vue init webpack vue-demo
Install vue-router ==>是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;
Use ESLint to lint your code ==> 是否需要 js 语法检测,如果不需要按 n 回车;
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具,目前我们不需要 所以 n 回车;
3、进入项目,开始启动项目
进入项目目录:cd vue-demo
启动项目:npm run dev
4、打开项目
http://localhost:8080/#/
5、编译打包项目
npm run build
然后会在根目录下生成一个dist文件,即打包后的项目
注意:打包踩坑
vue项目,访问打包后的项目,页面加载空白。这时会有两类问题,都是路径问题。
1.一个是css,js,ico等文件加载不到,是目录里少了dist
解决办法:
config/index.js文件的build->assetsPublicPath的默认值改为 ‘./’
assetsPublicPath:资源的根目录。这个是通过http服务器运行的url路径。因为webapp和static中间还有层dist,所以要用’./’
2.第二个就是单纯的在背景图使用相对路径导致加载不到图片或者icon加载不出来
解决办法:
build/utils.js文件的ExtractTextPlugin.extract=>新增 publicPath:"…/…/"