Vue-cli（Vue脚手架）vue脚手架搭建项目

vue脚手架搭建，从零开始搭建详细教程

---

1.Vue.js是一套构建用户界面的渐进式框架。
2.Vue 只关注视图层，采用自底向上增量开发的设计。
3.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

---

前言

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  可升级；
  基于 webpack 构建，并带有合理的默认配置；
  可以通过项目内的配置文件进行配置；
  可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

---

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject

---

话不多说直接开干

一、安装node.js

从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。
安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了
我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息

二、安装cnpm（淘宝镜像）

npm config set registry https://registry.npm.taobao.org

查看淘宝镜像是否安装成功，直接输入npm config get registry就会如下图所示

三、配置npm镜像下载位置（可省略）

注：如果不配置下载的文件在C盘这样会大量消耗我们的系统盘
1.查看npm默认位置npm config ls默认在C:\Users\Administrator下

2.首先配置全局缓存位置npm config set cache 'F:\nodereps\npm-cache'根据自己的需求配置路径
3.配置npm下载位置npm config set prefix 'F:\nodereps\npm-global'根据自己的需求配置路径
注：如果上边命令配置不成功
直接在电脑找到.npmrc我得在C:\Users\Administrator用记事本打开直接将设置好的路径添加进去即可。两种方法自选其一。如下图所示：

node.安装完成后开始搭建脚手架

四、安装vue-cli脚手架构建工具

在用 vue.js 构建大型应用时推荐使用 npm 安装，npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。

npm install -g vue-cli

删除已经安装得vue-cli：npm uninstall -g vue-cli

至此所有已经安装完成

创建一个Demo

vue init webspack加你的项目名，出现如下界面即为成功

切换到项目目录中输入：npm run dev运行当前创建好的项目，如下图所示：


出现上图界面一个vue项目就搭好了，根据自己得业务需求开始起飞吧…

手持烟火谋生活、心怀诗意以谋爱…