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 了。

猜你喜欢

转载自www.cnblogs.com/jasongrass/p/10355442.html