vue 环境搭建笔记

vue

环境

开发工具：VS Code

vue版本: 2.x

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

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

使用方式：

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

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

详见：淘宝 NPM 镜像

$ cnpm install -g vue-cli

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

PS
这里使用的是 vue-cli 2.x 版本，文档为：
vuejs/vue-cli at v2
最新的 vue-cli 为 3.x，文档为：
Vue CLI 3

$ 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 命令行工具的版本。

$ cnpm install -g @vue/cli

Vue CLI 3

vue create my-project # OR vue ui

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

在使用 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 了。