###vue-cli&&webpack
####准备工作

  1. 去node.js官网下载最新的node.jsnode下载
    一般选择下载左边的,右边是最新的,可能有未知的小bug;
  2. 直接点击next安装node即可;
  3. 通过Windows的cmd窗口,node -v可查看安装好的node版本好;
  4. npm在安装node的时候也会顺带安装好,可以通过npm -v查看版本号;
  5. 淘宝镜像,安装依赖包的时候速度会快一些,命令行是:npm install -g cnpm --registry=https://registry.npm.taobao.org
    ####创建项目
  6. 全局安装vue脚手架,在cmd中输入命令行:cnpm install -g vue-cli
  7. 创建项目,命令行是:vue init webpack my-vue(项目文件夹名),然后根据提示回车或者N即可;
  8. cd my-vue(项目文件夹名)进入到项目中去,然后可以通过npm install 依赖安装包,安装之后大致的结构图,如下图所示:vue-cli
    具体每个文件是做什么的,一下图做了具体说明:这里写图片描述
    其中源码目录中包含assets资源文件夹、components组件文件夹、App.vue根组件、main.js页面入口文件;
    ####测试环境
  9. 在cmd命令窗口中输入npm run dev,当编译成功,并且显示如下:test
  10. 去浏览器中输入localhost:8081即可访问到初始页面;
    ####项目打包
  11. 当完成项目需求,需要将项目进行打包到服务器。之前项目的测试都是在开发者模式进行测试的,现在需要切换到生产者模式进行测试;
  12. 打包命令:npm run build,成功之后会在项目文件夹下生产一个dist目录
  13. 在Windows环境下打包一般会出现路径的问题,需要对配置文件进行设置;
    3.1 对css和js文件路径的配置,如下图所示:js-css-path
    主要是修改assetsPublicPath: ‘./’,在**/前面加一个.**
    3.2 对图片文件路径的设置,如下图所示:image-path
    主要是加入publicPath:’…/…/'
Logo

前往低代码交流专区

更多推荐