今天正式开始Vue的学习，本系列文章旨在对自己学习的总结梳理，便于后续查看。本视频来源为慕课网，文章内容由本人逐字整理，强烈建议大家支持正版。

课程简介

image.png image.png

介绍课程的学习目标和学习内容。

学习目标

• 掌握Vue.js在实战用的运用
• 学会使用Vue.js完整地开发移动端APP
• 学会组件化、模块化的开发方式

学习内容

• Vue.js框架介绍
• Vue-cli脚手架的使用，搭建基本代码框架
• Vue-router，官方插件管理路由的使用
• Vue-resource，完成Ajax通信
• Webpack构建工具打包代码
• es6 + eslint ，学习es6语法和代码风格检查工具
• 移动端常用开发技巧，flex弹性布局和Css sticky footer布局边框动1像素边框
• 图标字体的使用

第1章 Vuejs介绍

从前端开发趋势分析开始，引入 MVVM 开发框架和 Vue.js，接着对比流行框架Angular 和 React，最后详细介绍 Vue.js 的核心思想-数据驱动和组件化。

1. 近年来前端开发趋势

image.png image.png

2. MVVM框架

image.png image.png

3. 什么是Vuejs和Vuejs生态

image.png

4. 对比Angular、React

image.png

5. Vuejs核心思想

image.png image.png image.png image.png

第2章 Vue-cli 开启 Vuejs 项目

介绍 Vue 项目的脚手架，如何安装，对脚手架生成的目录文件做介绍，介绍 Vue 组件的编写方法，最后运行 demo 项目并介绍 webpack 构建脚本来说明 demo 的运行原理。

1. Vue-cli介绍

vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，保存时 lint 校验，以及生产环境可用的构建版本。

image.png

https://github.com/vuejs/vue-cli

https://github.com/vuejs/vue-cli/tree/v2#vue-cli--

2. Vue-cli安装

npm install -g @vue/cli

3. 项目运行

vue create my-project

4. 项目文件介绍

image.png image.png

5. webpack打包

image.png image.png

真是慢成狗，果断换cnpm淘宝镜像

npm config get registry 
npm config set registry https://registry.npm.taobao.org
npm config get registry 
npm info express

image.png

npm install -g vue-cli

image.png

sudo npm install -g vue-cli

image.png

vue init webpack my-project

image.png image.png

vue init webpack nielifei
cd nielifei
npm run dev

image.png image.png