vue-cli和webpack基本使用

vue-cli&&webpack

准备工作

1. 去node.js官网下载最新的node.js
   一般选择下载左边的，右边是最新的，可能有未知的小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

创建项目

1. 全局安装vue脚手架，在cmd中输入命令行：cnpm install -g vue-cli
2. 创建项目，命令行是：vue init webpack my-vue(项目文件夹名)，然后根据提示回车或者N即可；
3. cd my-vue(项目文件夹名)进入到项目中去，然后可以通过npm install 依赖安装包，安装之后大致的结构图，如下图所示：，
   具体每个文件是做什么的，一下图做了具体说明：
   其中源码目录中包含assets资源文件夹、components组件文件夹、App.vue根组件、main.js页面入口文件；

测试环境

1. 在cmd命令窗口中输入npm run dev，当编译成功，并且显示如下：
2. 去浏览器中输入localhost:8081即可访问到初始页面；

项目打包

1. 当完成项目需求，需要将项目进行打包到服务器。之前项目的测试都是在开发者模式进行测试的，现在需要切换到生产者模式进行测试；
2. 打包命令：npm run build，成功之后会在项目文件夹下生产一个dist目录
3. 在Windows环境下打包一般会出现路径的问题，需要对配置文件进行设置；
   3.1 对css和js文件路径的配置，如下图所示：
   主要是修改assetsPublicPath: ‘./’，在/前面加一个.
   3.2 对图片文件路径的设置，如下图所示：
   主要是加入publicPath:’../../’