一、搭建脚手架步骤
需要先安装node.js。使用其自带的npm包管理器工具安装脚手架。关于npm可以查看之前博客:关于npm
1 全局安装@vue/cli
在cmd中使用如下命令全局安装Vue脚手架(第一次安装)
npm install -g @vue/cli
如出现下载缓慢请配置 npm 淘宝镜像: npm config set registry https://registry.npm.taobao.org
2 创建cli
切换到你要创建项目的目录下,使用如下命令创建脚手架
vue create xxxx
//xxxx 你的项目名称
创建过程中会出现版本选择提示,根据你开发需要使用的Vue版本进行选择即可。 babel ES6 ===> ES5 eslint 做语法检查的  出现Successfully即表示脚手架创建成功 
3 启动项目
根据所给提示操作 进入到创建好的项目脚手架目录中cd 创建的目录名 ,执行npm run serve 就可以看到你的项目了。  复制地址到浏览器中打开可以看到Vue脚手架搭建完成并给我们创建了一个 hello world 案例。 
二、分析脚手架文件结构

总结
Q:如何创建一个项目? A:
- 1)下载安装node.js ,安装成功即已捆绑安装npm
- 2)打开cmd输入命令
npm install -g @vue/cli 全局安装脚手架 - 3)切换到需要创建项目的目录下,使用
vue create xxx(你的项目名称) 命令创建Vue脚手架 - 4)脚手架创建成功即可打开脚手架目录文件进行项目具体代码编写。
- 5)可执行
npm run serve 命令运行查看页面效果。
|