vue从初始安装到基础语法

vue调试工具 -devtools

Chrome阅览器设置打开扩展点左上角,到插件商城搜索vue直接安装到谷歌就可以了
vue是一个渐进式的JavaScript框架
库: 封装的属性或方法 (例axios.js, jquery.js)， 框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)
渐进式: 逐渐按需添加, 想用什么就用什么, 不必全都使用
**vue特点:
渐进式
数据驱动视图
组件系统 **

** 工程化开发方式 在webpack环境开发vue ,这是最推荐,企业常用方式** vue不需要dom操作
写起来很爽,但是vue底层还是原生js

vue-cli脚手架介绍

(项目开始创建:脚手架就是一套固定的文件夹+文件+配置文件
在开发过程中,脚手架工具是有用的,开发完成(项目上线生产环境),他就没有用了)
vue-cli是vue官方提供的一个全局模块包(通过命令工具行来使用), 用来快速创建一个脚手架项目。
● 基于webpack
● 开箱即用,零配置
好处和功能
1.统一的项目结构
开发过程中的webpack个系列支持
babel支持
eslint约束语法风格(代码风格)
样式处理器less
vue单文件支持
2.提供一个开发是服务器,预览代码(阅览项目)
自动刷新,方便预览
热更新(只刷新修改的部分)
基于nodejs的命令行工具

安装vue-cli

目标模板全局安装
设置淘宝镜像下载(安装)速度更快

npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
npm config get registry  #查看镜像地址

全局安装 检测是否安装成功

npm install -g @vue/cli
//暂停 cls+c     
vue  -V
vue --version

注意点:1. @vue/cli 是完整的包名。包括前面的@符号
2. 它是vue生态的重要组成部分

创建项目

1.创建项目

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

2.选择模板

3.安装依赖

弹窗下面运行代码

4.启动项目
进入脚手架项目下, 启动服务，查看效果

cd vuecil-demo

npm run serve

打开地址进入
注意:1. 小黒窗中的vue create命令是由@vue/cli提供的。
2. vue create 用来快速创建项目：会自动创建文件夹
初始目录

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    └── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹=》写代码
      ├── assets     # 静态资源
          └── logo.png # vue的logo图片
      ├── components # 组件目录
          └── HelloWo