Vue-CLI 安装 -- 简单易懂

Vue-CLI

这相当于一个编译程序,将vue文件编译成html

安装要求: 有 node.js 环境
因为Vue-cli其实是建立在node环境下运行的,简单理解就是用以前的前后端混合生成页面的方式来生成网页,所以要运行cli就需要Node.js这个后端软件.

安装Node.js

Tip: 本人使用的是 win10x64位系统

打开 Node.js官网


安装使用默认选项即可,大佬们根据需求安装
安装完成可在cmd中使用node -v 查看 node.js 版本 就可以了

安装 vue-cli

由于npm使用的是国外源(就是国外服务器)下载会很慢,所以先安装了cnmp使用淘宝源

在控制台中输入以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
等待安装完成

在 vue cli 网址中找到安装命令

npm install -g @vue/cli
复制该命令 在控制台中执行 等待安装完成

当安装完成 在 控制台 中能查询到 cli信息就可以了

部署项目

使用 控制台 打开项目目录(按shift+鼠标右键可以直接打开控制台)

在打开的 控制台 中输入 vue ui 来创建项目(这里用的是可视化界面创建的,喜欢命令行创建的输入 vue create my-project 即可,注:命令行方式中提示都是英文 )

输入后稍等,浏览器会自动弹出管理页面(此时不要关闭 控制台 否则网页就失去连接了)






这样就创建完成一个项目了

简单的配置和使用

配置引入文件的路径和保存的文件夹名

开发时浏览的页面

当运行时可以在输出中直接打开页面

编译生成文件

如果在创建项目中浏览器一直显示在创建中,可以尝试重新创建

当你想要再次打开项目时可以使用以下方法
1.在控制台中任意路径输入 vue ui 即可弹出项目管理器
2.在项目 根目录 打开控制台 输入 npm run serve 回车

期待下次分享!