前言
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打开该项目