vue 环境搭建笔记

环境

开发工具：VS Code

vue版本: 2.x

准备

使用 npm 包管理器进行安装，也可以使用 yarn 包管理器。

可以使用淘宝的 npm 镜像，国内速度更快。

使用方式：

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

之后使用 cnpm 代替 npm 命令即可。

详见：淘宝 NPM 镜像

安装 vue 命令行工具 (CLI) - 2.x

$ cnpm install -g vue-cli

安装完成之后，就可以使用 vue 命令了。

PS

这里使用的是 vue-cli 2.x 版本，文档为：

vuejs/vue-cli at v2

最新的 vue-cli 为 3.x，文档为：

Vue CLI 3

使用模板创建一个新项目 - 2.x

$ vue init webpack my-project

// 安装依赖，运行
cd my-project
npm install
npm run dev

这里的 npm run dev 是指以 dev 方式的运行，具体的运行配置，可以查看项目中的 package.json 文件 。

以上内容为 2.x 版本的项目初始化方式，这里有视频教程：

vuejs开发环境搭建及热更新，vue.js入门基础教程-慕课网

下面说明 3.x 版本的安装和项目创建方式。

可以使用 vue --version 查看安装的 vue 命令行工具的版本。

安装 vue-cli 3.x

$ cnpm install -g @vue/cli

使用 vue-cli 3.x 创建 vue 项目

Vue CLI 3

vue create my-project
# OR
vue ui

使用 vue ui 命令可以使用 UI 交互式创建 vue 项目，很方便，适合初学者。

PS

在使用 vue ui 之前，可以先使用 cnpm 将以下包先安装了，不然可能会有点慢。

@vue/cli-plugin-babel

@vue/cli-plugin-eslint

@vue/cli-service

安装方法：

cnpm install -g @vue/xxx

使用 vue ui 创建项目成功之后（这里我选择的是使用 npm 作为包管理器），会自动启动 vue 的后台管理看板，用图形化的方式，可以直观的做很多事情。

如何运行刚刚创建的 vue 项目？

命令行进入新建的项目文件夹，运行 npm run serve ，会提示服务运行的端口，如 http://localhost:8080/ 。

在浏览器打开，即可查看默认创建的 demo 了。