初始化 Vue 项目

1.1.1 安装 Node.js

Windows 下 Node.js 与 npm 的安装与配置
建站不啰嗦,上手跟我做(十九)在 Linux 系统安装 Nodejs

1.1.2 淘宝 NPM 镜像

  • 因为在墙的原因啊,国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
  • 淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本 (只读),同步频率目前为 10 分钟 一次以保证尽量与官方服务同步。

第一步:安装

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

第二步:使用

支持 npm 除了 publish 之外的所有命令, 如:

 cnpm install [name]

1.2.1 vue-cli

介绍

vue-cli是官方的项目构建工具,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建 Vue.js 项目。

第一步 安装
npm install -g vue-cli

如果用 npm 下载速度慢,可以使用 cnpm.

第二步 选择模板

所有的官方项目模板在vuejs-templates。如果有新的模板添加进来,你需要使用下列命令,

vue init <template-name> <project-name>

也可以使用 vue list 来查看官方模板列表。

目前可用的模板包括:

  • browserify–全功能的 Browserify + vueify,包括热加载,静态检测,单元测试
  • browserify-simple–一个简易的 Browserify + vueify,以便于快速开始。
  • webpack–全功能的 Webpack + vueify,包括热加载,静态检测,单元测试
  • webpack-simple–一个简易的 Webpack + vueify,以便于快速开始。
  • simple - 单个 HTML 文件中最简单的 Vue 设置

1.3.1 第一个 vue 项目

第一步 生成项目

我们的项目选择 webpack, 使用以下命令

vue init webpack vue-todos

前面就一直点回车就行了,后面使用 ESLint, 测试就选择 no 就行。
4249223-8123752b02d6b5da.png

第二步 运行项目

输入下面的命令就可以运行这个项目了。

cd vue-todos

npm install

npm run dev

这是时候就会自动打开端口 http://localhost:8080/#/
你会看到这样的页面。那我们就成功了。