Vue系列(十一)之vue-cli脚手架创建项目

为什么需要脚手架? 为了快速开发,我们不可能赤手空拳的写代码。使用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 命令,启动项目,可以在浏览器中预览你的页面了:
在这里插入图片描述

发布了53 篇原创文章 · 获赞 61 · 访问量 11万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章