vue-cli和webpack基本使用

一、准备工作

1.1 去node.js官网下载最新的node.js

我这里下载的8.11.1 LTS 版本的npm

1.2 下载并安装完成后，使用node -v 查看node版本号， 使用 npm -v 查看npm的版本号

1.3 设置淘宝npm镜像（因为安装依赖时会比较快）

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install -g cnpm --registry=https://registry.npm.taobao.org

二、创建项目

2.1 全局安装vue脚手架，命令如下：

cnpm install -g vue-cli

cnpm install -g vue-cli

2.2 创建项目， 命令如下：

vue init webpack my-vue     #注：my-vue是自定义的项目名

vue init webpack my-vue     #注：my-vue是自定义的项目名

2.3 cd my-vue(项目文件夹名)进入到项目中去，然后可以通过npm install 依赖安装包，安装之后大致的结构图，如

具体每个文件是做什么的，下图做了具体说明：

其中源码目录src内包含assets资源文件夹、components组件文件夹、App.vue根组件、main.js页面入口文件；

三、测试环境

在命令窗口中输入npm run dev，当编译成功，并且显示如下：

I Your application is running here: http://localhost:8080

四、项目打包

当完成项目需求，需要将项目进行打包到服务器。之前项目的测试都是在开发者模式进行测试的，现在需要切换到生产者模式进行测试；

4.1打包命令：

npm run build   #成功之后会在项目文件夹下生产一个dist目录

npm run build   #成功之后会在项目文件夹下生产一个dist目录

4.2在Windows环境下打包一般会出现路径的问题，需要对配置文件进行设置；

主要修改为assetsPublicPath: “./”，也就是在”/”前面加一个”.”

4.3 对图片文件路径的设置，如下图所示：

在build/utils.js文件中加入publicPath:”…/…/”