【V1】安装Vue.js

介绍Vue.js

Vue.js是一款轻量级的以数据驱动的渐进式JavaScript 框架。
Vue 不支持 IE8 及以下版本

MVVM架构模式

image.png

MVVM（Model-View-ViewModel）
Model模型层：存储数据
View视图层：显示数据
ViewModel：不需要我们来编写，它是vue自带的，负责连接 View 和 Model，保证视图和数据的一致性。
Vue.js 就是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库。其核心是ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

安装Vue.js

直接用 <script> 引入

<!-- 开发版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

命令行工具 (CLI)

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。可查阅 Vue CLI 文档

安装Vue CLI

// 1、全局安装 vue-cli, 仅安装一次就行了
npm install -g @vue/cli
# OR
yarn global add @vue/cli-init

// 2、创建一个基于 webpack 的模板新项目
vue init webpack my-project

// 3、运行项目
npm run start

image.png

---

番外：VScode的代码提示插件

image.png

安装 stylus 用于写css样式

类似less和sass，视频讲，俩个都要安装

npm install stylus --save
npm install stylus-loader --save