vue-cli基础搭建

702 阅读1分钟

对vue-cli脚手架搭建的小记录。

打开命令窗口

vue-cli脚手架的搭建前需要安装node环境

1、首先检查node是否存在

node -v

如果存在就可以继续安装,如果不存在需要自行安装node

2、再次检测此设备是否有vue的存在

vue -V
  • 存在
    • 升级
    • 卸载重装
  • 不存在
    • 安装

如果需要升级或重新安装

升级
npm update vue --save
卸载重新安装

全局卸载

npm uninstall vue-cli -g;

检查是否卸载

卸载成功就重新安装

npm install vue-cli -g 

注:如果你使用以上命令显示报错,则需要安装淘宝镜像,因为npm服务器是在国外,国内网络环境太慢,就会显示报错,就要使用淘宝镜像安装。

npm config set registry https://registry.npm.taobao.org

再次操作安装步骤

cnpm install vue-cli -g  

再次检查是否安装成功

3、创建项目

可以进入到自己想要建立项目的磁盘或者文件夹中创建项目

d:
cd PracticeProject

注:我是在D盘的PracticeProject文件夹中创建的项目。 创建一个基于"webpack"的项目,后面是项目名

vue init webpack vueCli

选择合适的插件进行安装,需要Yes 不需要No

4、进入项目目录 并安装项目依赖

cd PracticeProject
cnpm install

5、启动项目

要进入项目中并启动项目

cd vueCli
npm run dev

展示出这个页面的时候,说明我们的脚手架已经搭建成功。

系统默认的端口是8080,如果此端口已被占用,可以在项目中config/index.js对端口进行修改。