Vue2.0- 搭建 Vue 脚手架（vue-cli）

介绍

Vue-cli 是 Vue 的脚手架工具
主要作用：目录结构、本地调试、代码部署、热加载、单元测试
项目地址：https://github.com/vuejs/vue-cli

一、环境搭建

1. node.js 安装

从 node.js 官网 下载 node.js 安装包（这里推荐下载带 LTS 的稳定版本），安装成功后打开命令行管理工具(cmd)，输入 node -v ，出现 node.js 的版本号，则安装成功。(此时已经自带了 npm-包管理工具)

2. nrm 的安装使用

nrm 作用: 提供了一些常用的 npm 包镜像地址，能够快读的切换到安装包时候的服务器地址
1.运行 npm i nrm -g 全局安装 nrm 包;
我电脑上已经装过了，所以会提示更新 nrm 版本，如下图所示：

2.使用 nrm ls 查看当前所有可用的镜像源地址以及当前所使用的镜像源地址;

格式为 镜像名 ---- 镜像地址

3.使用 nrm use 镜像名 来切换不同的镜像地址，国内的话一般会使用 cnpm 或者 taobao 的镜像。

4.使用 cmpm -v 可以查看对应的版本号

3. webpack 的安装

webpack 是一个现代 JavaScript 应用程序的_静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个_依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。具体可以自行去 webpack 官网 了解更多，这里不作深入说明。

运行 cnpm install webpack -g 全局安装，安装完成后使用 webpack -v 查看是否安装成功(出现对应的版本号则说明已安装成功)。

4. vue-cli 脚手架构建工具的安装

运行 cnpm install vue-cli -g 全局安装， 安装完成后使用 vue -V 查看是否安装成功(出现对应的版本号则说明已安装成功)。

二、使用 vue-cli 构建项目

1. 指定项目的目录

指定项目的路径可以手动 cd 目录路径 或者 安装了 git 后，进入相关的目录选择 Git Bash Here，这里我把项目目录手动指定在 D:\testVue 作为测试。

2. 创建 vue 项目

运行 vue init webpack my-project ,这里的 my-project 为项目名，可以自行起名，但是不能用中文。
这里会让你输入一些项目的信息，具体介绍如下：

? Project name (my-project) ---------------------项目名称
? Project description (A Vue.js project) ---------------------项目描述
? Author ---------------------作者
? Vue build
? Install vue-router? (Y/n) ---------------------是否安装路由
? Use ESLint to lint your code? (Y/n) ---------------------是否启用 eslint 检测规则(一种代码规范)
? Set up unit tests (Y/n) ---------------------是否安装单元测试
? Setup e2e tests with Nightwatch? (Y/n) ---------------------是否安装 e2e 测试
? Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
Yes, use NPM
Yes, use Yarn
No, I will handle that myself

安装完成后的项目目录如下：

3.运行项目

项目构建完后需要为项目安装依赖，进入项目目录，运行 cnpm install

完成后运行 cnpm run dev, 出现：

则说明启动成功。
注意：服务的端口是 8080，所以请确保机子的 8080 端口没有被占用

好啦，这里输入 http://localhost:8080 就可以看到一个初始化构建的 vue 单页面应用

版权声明：本文为原创文章，转载请注明出处: http://www.honeybee.top/articles/2018/09/20/1537423344756.html