脚手架搭建vue项目框架 CLI3项目搭建查看

---

搭建方案

vue-cli 是一个官方发布 vue.js 项目脚手架，目的是快速创建 vue 项目。

实现步骤：

• 步骤1：安装node.js
• 步骤2：安装npm(国内推荐淘宝镜像cnpm)
• 步骤3：安装webpack
• 步骤4：安装vue脚手架
• 步骤5：创建项目
• 步骤6：运行项目
• 步骤7：编译项目
• 步骤8：创建Login界面

详细步骤

• 安装node.js

https://nodejs.org/en/download/

提示：node.js安装非常简单，直接在官网下载安装即可。

• 安装npm(国内推荐淘宝镜像cnpm)

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

提示：npm是vue项目的包依赖管理工具，在国内直接安装npm失败的概率较高，所以我们推荐使用淘宝镜像cnpm。-g 代表全局安装，建议首次安装时加上此参数，以方便后续的项目创建。安装完成后，可以用cnpm -v这个命令来检验是否安装成功，若展示对应的版本号，则表示安装成功。另外建议从此步骤开始，尽量在纯外网环境下安装。

• 安装webpack

cnpm install webpack -g

提示：webpack相当于vue项目的包管理工具，-g 代表全局安装，建议首次安装时加上此参数，以方便后续的项目创建。

• 安装vue脚手架

sudo cnpm install vue-cli -g

提示：vue的脚手架是用来构建vue项目框架的工具，-g 代表全局安装，建议首次安装时加上此参数，以方便后续的项目创建。

• 创建项目

vue init webpack projectname

提示：projectname即是项目名称，根据实际情况填写即可，后续还有多步配置，都非常简单，按照项目的需求配置即可。另外在创建项目的过程中，可能会出现下载失败的情况，大家也不必灰心，如果出现长时间下载未完成的情况，这种情况也很正常，大胆的停止即可，然后再多尝试下载几次。或者直接cd到项目的目录下，再执行cnpm install把需要的包下载完成即可。

• Generate project in current directory?

提示：是否在本目录下安装

• Project name?

提示：项目名称

• Project description?

提示：项目描述

• Author?

提示：开发者

• Vue build standalone?

提示：编译配置，默认回车即可

• Install vue-router?

提示：是否安装vue的路由，建议yes

• Use ESLint to lint your code?

提示：是否使用ESLint代码检查工具，建议yes

• Pick an ESLint preset?

提示：选择标准的ESLint

• Set up unit tests?

提示：是否设置单元测试

• Pick a test runner?

提示：选择一个test runner，根据项目实际需要选择即可

• Setup e2e tests with Nightwatch?

提示：建议yes

• Should we run npm install for you after the project has been created?

提示：建议yes

• 运行项目
  npm run dev

• 编译项目
  npm run build
  VUE学习之路二 框架简介
  VUE学习之路三 项目配置介绍
  VUE学习之路四 创界第一个界面