Vue的几大特点
易用
已经会了 HTML、CSS、JavaScript,即刻阅读开发指南开始 Hello World!
灵活
不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。
高效
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化
Vue.js 安装方式
1.在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2020最新Vue入门实战教程1-安装</title>
<script src="vue.js"></script>
</head>
<body>
....
</body>
</html>
2.使用 CDN 的方式
Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
jsdelivr: https://cdn.jsdelivr.net/npm/vue/dist/vue.js 最新版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2020最新Vue入门实战教程1-安装</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
......
</body>
</html>
NPM/CNPM 安装
必须先装node.js(官网下载最新版安装即可),安装完后,先装好cnpm(淘宝镜像)下面是命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
查看到版本号,已经安装成功!接下来进行vue的安装
cnpm install --global vue-cli
vue-cli 是官方提供的命令行工具,可用于快速搭建大型单页应用,安装好后我们来创建一个项目
? Project name demo“项目名称”
? Project description “项目描述”
? Author www.runcto.com “作者”
? Use sass “使用sass”
这几项的意思,一直回车就行,安装完就会在你所在目录生成demo项目
然后 cd到此目录进行安装运行
cd demo
cnpm install
cd demo
cnpm run dev
启动起来看看
访问 http://localhost:8080/
Welcome to Your Vue.js App!!