vue 创建一个新的项目（二）

前言

Vue不仅改善了前端的开发体验，还极大地提高了开发效率。为了更好地掌握Vue的使用方法，本章将对Vue基础知识进行讲解，内容包括Vue实例的配置选项、data初始数据的定义、常用的内置指令、使用内置指令实现双向数据绑定和列表渲染、Vue组件，以及Vue生命周期方法等。

一、安装

1、安装node.js环境

为什么要安装Node.js?
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

步骤1、官网下载 http://nodejs.cn/（中文版）https://nodejs.org/en/（英文版）

下载对应版本的安装包

参考文档：https://blog.csdn.net/qq_40298902/article/details/105896885

2、安装npm

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

npm 版本需要大于 3.0，如果低于此版本需要升级它：

查看版本(win+R==>输入“cmd"进入小黑窗口)

$ npm -v

#升级 npm
cnpm install npm -g

升级或安装 cnpm

npm install cnpm -g

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装：

最新稳定版

$ cnpm install vue

二、创建vue项目

首先我们计划在E盘下创建文件夹MyVueProject，右键打开命令窗口，或者在文件夹路径处输入“cmd”，

进入命令窗口，输入一下命令：

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目  my-project 为项目名
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

成功后为如下图

进入上图，右键进入命令窗口，输入命令启动项目
进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms
> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

分析文件

最后你可以用VS code打开该项目

三、Vue实例