Vue安装及基本语法

一、VUE安装

1.介绍

• 一个用于构建 Web 用户界面的平易近人、高性能且通用的框架。
• VUE的两大核心
  • 响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心 dom 操作，而专心数据操作
  • 可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试

2.安装方法

• 使用npm命令一次性安装脚手架和服务

npm install -g @vue/cli @vue/cli-service-global @vue/cli-service

• 安装时报如下错误，

  

windows运行-》cmd-》输入powershell-》命令行输入：set-ExecutionPolicy RemoteSigned-》命令行输入：A-》回车-》重启VS code

• 检查是否安装成功 执行vue -V

  

• 创建项目

# 1、创建一个项目
vue create vuecli
# 2、选择：用vue2，vue3，手动配置。 vue2，vue3除了基本语法， 还有下面2个功能
# 2.1、babel 把es6的语法，转成es5的语法，可以做到兼容
# 2.2、eslint 语法检查，约束你的代码习惯
please pick a preset：
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features
# 3、手动选择功能：Choose Vue version、Babel、CSS Pre-processors
Check the features needed for your project:
  Choose Vue version                  // 版本
  Babel                               // 把es6的语法，转成es5的语法，可以做到兼容
  TypeScript                          // 由微软开发的自由和开源的编程语言，是 JavaScript 的一个超集，支持es6语法
  Progressive Web App (PWA) Support   // Web APP开发
  Router                              // 路由
  Vuex                                // 状态管理器
  CSS Pre-processors                  // css预处理器：三种流行的CSS预处理器：Sass、LESS 和 Stylus
  Linter / Formatter                  // 语法检查器(eslint)
  Unit Testing                        // 单元测试
  E2E Testing                         // e2e(端到端)测试
# 4、选择版本：3.x
Choose a version of Vue.js that you want to start the project with:
  2.x
  3.x
# 5、选择css预处理器版本：dart-sass，官方目前主力推dart-sass
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/Scss (with node-sass)
  Less
  Stylus
# 6、配置文件：In package.json
Where do you prefer placing config for Babel, ESlint, etc.?
  In dedicated config files   // 独立配置文件
  In package.json             // 放在package.json里
# 7、是否保持此项目配置：保存的话，起个名字
Save this as a preset for future projects?
  y   // 保存
  n   // 不保存

• 运行项目
  cd vue
npm run serve

  
  

更多详解：http://www.ouyangke.com/front/vue3/1Vue3%E5%85%A5%E9%97%A8.html

二、VUE基本语法

http://www.ouyangke.com/front/vue3/2Vue3%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95.html