01入门知识

Vue的优势与特点

轻量级的框架：只关注视图层，是一个构建数据的视图集合。

通过简单的API提供高效的数据绑定和灵活的组件系统。

双向数据绑定：使用MVVM框架，数据双向绑定，当数据发生变化，视图也会发生变化，当视图发生变化，数据也会同步变化

指令：包含内置指令和自定义指令，以“v-” 开头，作用于Html元素。能为绑定元素提供特殊行为

插件：用于对Vue框架功能进行扩展，通过MyPlugin.install完成编写，简单配置就可全局使用

组件化：是Vue最强大的功能之一。可以扩展Html元素，封装可重用的代码，减少代码编写。

Vue的数据双向绑定（简）

视图模型通过Vue来监听数据模型的变化

数据模型通过Vue绑定到视图模型上

需要安装

node.js （携带了npm）

npm常用命名

npm install 包名：该命令用于安装项目指定包

npm install 包名 :会下载dependencies和devDependencies中的模块

npm install 包名 —save: 生产环境依赖的模块dependencies

npm install 包名 -g: 表示全局安装

npm install 包名@版本号 ：下载指定版本的第三方包或者命令行工具

npm uninstall 包名： 卸载指定包

npm update 包名：更新指定包

npm start：项目启动；

npm run build：项目构建

通过npm安装Vue-Cli

Vue-Cli是Vue官方提供的一个命令行工具，也称为Vue脚手架，可帮助我们快速构建Vue项目
安装方法：npm install —global vue-cli

Webpack安装与使用

Webpack是一个模块打包工具，可以把前端项目中的js、css、图片等文件都打包在一起，实现项目自动化构建。类似我们使用idea等工具新建项目。

安装方法：npm install webpack –g

如果需要安装指定版本，可以在webpack后加入对应版本信息

Webpack构建项目

先通过方式一cd命令到一个空的文件夹，

方式二直接在空文件夹的地址栏中输入cmd进入命令页面

通过vue init webpack xxx (xxx为项目名)

然后根据提示输入对应的数据

Project name：项目名称，直接回车，项目名必须小写
Project description：项目描述
Author：项目作者接下来会让用户选择：
Runtime + Compiler: recommended for most users 运行加编译，就选它
Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，我们目前不需要，n回车
Setup unit tests? (Y/n) 是否安装单元测试，n回车
Should we run ‘npm install’…….？选择安装工具为npm后回车

Vue2目录