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 vue-cli搭建过程
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
vue-cli搭建过程
4、打开项目
http://localhost:8080/#/
vue-cli搭建过程
5、编译打包项目
npm run build
然后会在根目录下生成一个dist文件,即打包后的项目
vue-cli搭建过程
vue-cli搭建过程
注意:打包踩坑
vue项目,访问打包后的项目,页面加载空白。这时会有两类问题,都是路径问题。
1.一个是css,js,ico等文件加载不到,是目录里少了dist
解决办法:
config/index.js文件的build->assetsPublicPath的默认值改为 ‘./’
assetsPublicPath:资源的根目录。这个是通过http服务器运行的url路径。因为webapp和static中间还有层dist,所以要用’./’
vue-cli搭建过程
2.第二个就是单纯的在背景图使用相对路径导致加载不到图片或者icon加载不出来
解决办法:
build/utils.js文件的ExtractTextPlugin.extract=>新增 publicPath:"…/…/"
vue-cli搭建过程

相关文章:

  • 2021-10-31
  • 2022-12-23
  • 2022-12-23
  • 2021-08-10
  • 2021-05-29
  • 2021-04-11
猜你喜欢
  • 2022-12-23
  • 2021-10-25
  • 2021-05-16
  • 2022-03-02
  • 2022-12-23
相关资源
相似解决方案