关于webpack的安装和vue相关模块

参考文件

https://www.cnblogs.com/lgx5/p/10732016.html
在安装node环境的时候遇到一些问题，此篇文章很详细的介绍了安装的过程。解决了安装的问题

安装教程

关于node.js一直所提及的npm，webpack，vue

node.js

直接在node的官网下载对应版本
http://nodejs.cn/download/
下载之后开始安装，直接next，
安装之后，打开cmd，可查看node版本

node -v

npm

安装或者更新npm

npm install npm -g

查看npm版本

npm -v

我们准备把npm本地仓库移动到C:\Program Files\nodejs目录下
先在C:\Program Files\nodejs目录下创建node_global和node_cache文件。然后运行下面两条命令

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

查看npm的目录结构

npm list -global

接下来配置一个淘宝镜像站（好像现在大多数都是用的这个镜像站）

npm config set registry=http://registry.npm.taobao.org 配置镜像站

查看配置信息

npm config list

查看配置镜像是否成功

npm config get registry

需要增加环境变量NODE_PATH 内容为：C:\Program Files\nodejs\node_global\node_modules

vue

查看vue的信息

npm info vue

测试npm安装vue.js

npm install vue -g

测试npm安装vue-router

npm install vue-router -g

测试安装vue-cli

npm install vue-cli -g

如果直接输入命令 vue 提示找不到命令，也不是可运行的程序。可能是因为vue的脚本在自定义的目录global下，不在path环境变量。此时需要修改环境变量中的path，对环境变量path添加：C:\Program Files\nodejs\node_global

使用命令行 vue -V 查看vue版本，到此时，相关模块已经安装完毕

创建项目

创建一个vue项目

vue init webpack object

安装过程如下
现在项目已经创建完成，我们可以开始运行了。

关于运行项目

直接运行

先切换到项目的目录下
cd …/ 返回上级目录
cd vue01 切换到vue01目录下

npm run dev
运行项目

运行项目时候 running地址问题

在npm run dev 之后。出现如下页面

而且页面打开地址为出错页面，但是把0.0.0.0:8080修改为127.0.0.1:8080就可以访问了。实际上是因为在文件的配置文件config/index.js中有如下配置

修改host的配置就可以了

项目打包

css加载路径出错

直接打包项目，访问之后，会发现项目启动出现问题。
项目出现白屏，css加载报错：
我们找到config下面的index.js。修改build下面的assetsPublicPath
如下图：

修改为：
重新打包之后运行，页面出现部分内容，但是图片，js，json文件还是存在加载出错。

逐个去修改图片的调用路径，js，json，mp3。

element-ui icon图标不出现问题

在build/utils.js中增加
publicPath: ‘…/…/’,//解决ele小图标出不来问题，如下：

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../',//解决ele小图标出不来问题
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}