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