一.【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 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

推荐阅读更多精彩内容