为什么需要脚手架? 为了快速开发,我们不可能赤手空拳的写代码。使用Vue也是这样,Vue-CLI脚手架工具帮我们快速创建一个项目模版,默认包含webpack打包工具。默认配置下,我们就可以启动运行项目。
下载安装Node.js
Vue-Cli依赖node,所以我们的电脑需要下载安装node并配置环境变量。
Node官网下载Node.js
windows需要配置环境变量,方法请自行百度。
终端窗口输入:node -v查看node版本号:
node -v
新版本的node中包含了npm,npm是包管理工具,类似于Gradle和Maven等包管理器。npm地址
终端输入命令:npm -v 查看npm的版本号:
npm -v
设置镜像
在国内使用npm是很慢的,所以我们需要设置淘宝镜像,终端执行如下命令:
npm config set registry " https://registry.npm.taobao.org "
查看npm镜像配置:
npm config get registry
简单的命令
npm init xx
初始化项目,使用npm包管理器,生成package.js
npm install xx
安装依赖包,install可以简写为“i”,即 npm i xx
npm install xx -D
安装依赖包,在开发环境
npm install xx -g
全局安装
npm run xx
运行脚本
安装vue-cli脚手架
vue-cli安装
全局安装vue-cli脚手架工具,终端执行命令:
npm install -g @vue/cli
执行: vue --version 查看是否安装成功:
vue --version
创建项目
使用vue-cli创建一个vue项目.
打开终端,进入到你要创建项目的目录下,执行命令:vue create hello-world
vue create hello-world
按照提示选择项目要集成的库。vue-cli也支持图形化创建项目,使用vue ui 命令,详细操作见官网创建项目
现在运行npm run serve 命令,启动项目,可以在浏览器中预览你的页面了: