一.【Vue踩坑】vue-cli项目创建

---

Vue-cli搭建项目

准备工作

首先先确定一下自己的node和npm都安装好了，然后给npm弄一下淘宝镜像。

安装一下vue-cli，这里使用npm或者cnpm都行。主要还是看你网速，大部分情况下，我都是建议使用npm的，因为用npm引入的版本是最新的。

npm install -g vue-cli
cnpm install -g vue-cli

检查一下安装成功没

vue -V

image

很明显，这里我是安装成功了的。显示的版本号为2.8.2。（这里是我17年的时候的截图，今天是2018年5月，生成的是2.9.3）.如果没有安装成功可以使用命令清除缓存，然后重新安装。

npm cache clean

或者在执行任务过程中，比如npm因为网速原因卡顿了，可以按Ctrl+c结束操作。

项目生成

先进入到项目目录，输入

vue init webpack Vue-Project

webpack是模板名称
Vue-Project自定义的项目名称

image

查看一下目标文件夹，项目构建完成

image

进入到Vue-Project项目目录中，安装依赖

cnpm install

启动项目

npm run dev

image

好的，成功运行。
如果8080端口被占用或是想修改端口号，那么在项目目录中，打开config->index.js文件

修改一下端口号

image

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。