一、Vue-Cli3 环境安装
- node安装
到官网地址http://nodejs.cn/download/ 下载最新版本的node
image.png
安装后，打开cmd 输入 node –v ，npm –v 可以查看版本号
node的安装主要是为了安装npm ，npm是Node.js的包管理工具（package manager）,类似vs里的nuget 。
为啥需要这么预估包管理工具，因为我们在开发时会用到别人写的插件，如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。
更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。
有了npm ,我们就可以通过npm install 很轻松的安装我们所需要的包；
- npm安装淘宝镜像
为了下载速度，我们可以把registry 设置到淘宝的镜像网站上
在cmd里输入npm config set registry https://registry.npm.taobao.org
通过 npm config get registry 查看
- 安装Vue-Cli3
通过vue create 快速创建一个新项目的脚手架，免去我们自己去进行webpack
的配置
npm install –g @vue/cli
通过 vue –V 查看 vue版本
二、开发工具
VS Code
安装扩展Vetur，方便我们写vue代码
三、创建vue项目
-
vue简单介绍
-
Vue.js是什么
Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库，拥有非常容易上手的 API； Vue.js是一个构建数据驱动的 Web 界面的库。
-
Vue.js的特性
-
轻量级的框架
-
双向数据绑定
-
指令
-
插件化（组件化）
-
MVVM框架
『View』：视图层（UI 用户界面） 『ViewModel』：业务逻辑层（一切 js 可视为业务逻辑） 『Model』：数据层（存储数据及对数据的处理如增删改查）
· MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联系，它们通过 ViewModel 这个桥梁进行交互。
· Model 和 ViewModel 之间的交互是双向的，因此 View 的变化会自动同步到 Model，而 Model 的变化也会立即反映到 View 上显示。
· 当用户操作 View，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model 发生改变，ViewModel 也能感知到变化，使 View 作出相应更新。
2．创建vue项目
在你需要创建的项目目录下打开cmd 输入 vue create 项目名称 ，就自动创建了，生成项目文件如下。
image.png
node_modules 文件夹:存放第三方依赖包，通过npm install 安装的包都是放到该目录下。
public 文件：存放静态文件，包括网站图标和页面入口文件
src：存放我们的源码文件，其中main.js为入口js，app.vue为根组件
package.json：项目描述及依赖
3.运行和发布项目
使用npm run serve 就可以运行该项目，使用npm run build就可以打包发布该项目，打包后的文件存在dist文件夹里，该配置命令来做package.json文件里
image.png
运行npm run serve 会出现运行成功如下图
image.png
- 生命周期
image.png
5.编写代码
image.png
四、集成element-ui
element-ui提供了大量好用的组件，可以帮助我们快速的进行开发。
-
采用npm安装 命令：npm i element-ui –S
-
安装完成后在main.js全局引用
image.png
-
在页面上使用
image.png
image.png
组件的具体使用方式参考element-ui 官网
五、学习资料
es6：https://es6.ruanyifeng.com/ （开发过程中尽可能使用es6的用法，变量（let，const）的申明，Promise、async的使用）（必学）
Vue：https://cn.vuejs.org/ （必学）
Vue-Router：https://router.vuejs.org/zh/ （必学）
Vuex：https://vuex.vuejs.org/zh/（必学）
webpack：https://www.webpackjs.com/
网友评论