vue脚手架到底是什么?为什么要用这个东西?

官方介绍Vue 提供了一个[官方的 CLI](https://github.com/vuejs/vue-cli)，为单页面应用 (SPA) 快速搭建繁杂的脚手架。

理解为vue脚手架是一个方便我们摆脱繁琐的目录创建以及结构关联的框架

安装

安装node.js

从官网https://nodejs.org/en/下载并安装(全部next)即可;
打开命令行工具(window+r->cmd)输入node -v,出现对应版本号即安装成功

image.png

对应的我们所需要的npm包已经集成在node中,输入npm -v,出现对应版本

image.png

由于 npm 安装速度慢,推荐使用cnpm(宝 NPM 镜像),你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

脚手架搭建的话,npm 版本需要大于 3.0，如果低于此版本需要升级它
所以先查看版本

# 查看版本
$ npm -v

若低于3.0,那么版本需需要进行升级

#升级 npm
cnpm install npm -g

# 升级或安装 cnpm
npm install cnpm -g

安装vue

# 最新稳定版
$ cnpm install vue

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

安装 vue-cli

# 全局安装 vue-cli
$ cnpm install --global vue-cli

创建项目

# 创建一个基于 webpack 模板的新项目,my-project为项目名称,可自定义
$ vue init webpack my-project

创建时需要进行一些配置
初步学习阶段除了基本信息,全选no即可

image.png

创建成功后会返回一些我们后续需要用到的东西

image.png

cd my 进入目录下
npm run dev 运行项目

运行项目会返回给我们打开项目的地址

image.png

在浏览器输入http://localhost:8080(根据返回而定)访问
或者重新打开一个新的命令行工具直接在输入

explorer http://localhost:8080

image.png

即可打开浏览器访问

image.png

注意:若你关闭了启动项目的npm窗口,会导致地址失效,项目无法打开

下一节.我们来介绍下创建项目的目录结构组成

点赞.jpg