前面我们在学习 Vue
的时候都是将 Vue
的代码直接写在 html
文件的 script
中,但实际工作中,我们会使用工具(比如 vue-cli
)创建完整的项目结构,同时将 vue
项目托管于 nodeJS
等 JS
运行时,实现前端服务的生产化部署。
Node.js
是一个基于 Chrome V8
引擎的 JavaScript
运行环境。Node.js
使用了一个事件驱动、非阻塞式 I/O
的模型,使其轻量又高效。Node.js
的包管理器 npm
,是全球最大的开源库生态系统。
从 NodeJS
的官网nodejs.org
上下载 NodeJS
安装包,然后下一步,下一步安装即可。安装完后,在终端中执行node -v
验证 NodeJS
是否安装成功。如下为安装成功的效果。
由于在国内访问 npm
的官方源速度很慢,所以我们要下载内源 npm
客户端 cnpm
。
npm install -g cnpm --registry=https://registry.npm.taobao.org
或者
npm install -g cnpm --registry=http://r.cnpmjs.org/
vue-cli
是 vueJS
的脚手架,我们可以用它来创建 Vue
项目,他帮我们配置好了 webpack
,节省了你配置 webpack
的繁琐。
# 全局安装vue-cli
cnpm install vue-cli -g
验证 vue-cli 安装成功与否
vue list
当安装了
vue-cli
后在创建项目的时候,发生一直卡在downlaod template
的时候,我们重新卸载安装webpack
即可。
cnpm uninstall webpack -g
cnpm install webpack -g
命令
vue init webpack demo
项目创建过程中需要你进行一些配置确认,然后静静等待项目创建完成即可。
我们选择HbuilderX
打开项目(你可以使用任何你喜欢的编辑器),切换到demo
项目根目录,使用npm run dev
启动项目。
我们使用本地浏览器访问 http://localhost:8080
查看效果。
今天,我们就先到这里,下节我们将在此项目结构基础上,将对接
FastApi
后端演示前后端分离。