教程简介
-
1、阅读对象
本篇教程适合新手阅读，老手直接略过 -
2、教程难度
初级，本人水平有限，文章内容难免会出现问题，如果有问题欢迎指出，谢谢 -
3、Demo 地址
教程大纲
一、什么是 Vue
- Vue 的特点
二、Vue 的使用方式
1、直接引入 script
2、使用 CDN
3、使用 yarn/npm
4、使用 vue-cli 脚手架
三、Vue 的开发工具
正文
一、什么是 Vue
Vue 是一个用于构建用户界面的渐进式框架「注意读音类似于 View，作者的初衷也是让其起 View 的功能」，Vue 只注重视图层，这点和 React 的是一毛一样的
vue 的特点
-
简单、易用
-
灵活
-
高效
二、Vue 环境搭建
1、Vue 的使用方式
1、下载 vue.js 引用到项目中
我们直接下载 vue.js 然后引入 标签中即可，Vue 分为开发版本和生产版本
-
1、开发版本：https://vuejs.org/js/vue.js
PS： 开发版本有完整的调试和警告，而生产版本则是一个精简版本，删除了警告，如果我们在开发的时候建议选择开发版本方便调试
使用方式
<html> <head> <!-- 引入 vue.js 所在的目录--> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script> </head> <body> </body></html>
2、使用 CDN 引用
3、使用 nmp/yarn 安装
- 1、安装 node
使用 npm 和 yarn 首先要安装 node，可以去官网下载：https://nodejs.org/en/download/current/
下载对应 win 系统还是 mac 系统的版本，然后安装即可
在我的 mac 电脑上我直接使用 Homebrew 安装的
brew install node
安装完 node 会自带 npm「node 的包管理器」,安装完成以后在命令行中输入
node -v
看到以下 node 的版本信息则表示安装成功了
- 2、使用 npm 安装 vue
在命令行输入以下命令即完成安装
// 全局安装
npm install -g vue
使用 vue-V 查看是否安装成功，如果显示出版本号则表示安装成功
- 3、使用 yar「替代 npm 的包管理器」 安装
a)、 要使用 yarn 先需要安装 yarn , 在这里我们使用 npm 安装 yarn
// 全局安装
npm install yarn -g
b)、 使用 yarn 安装 vue
yarn global add vue
以上命令在 win 系统上安装完成以后，在命令行中使用 vue 可能会出现 Command not found 命令，那么我们需要配置一下环境变量。把 yarn 的 bin 目录配置到环境变量即可「配置到 path 路径下」，使用以下命令直接查看 yarn 的 bin 目录「把此命令显示出的路径直接配置到 path 后面即可」
yarn global bin
由于我这里是 mac 电脑，所以就不演示了，如果碰到这个问题，就配置一下环境变量即可
使用 vue-V 查看是否安装成功，如果显示出版本号则表示安装成功
2、使用 cli 「命令行工具」
我们除了上面的引用或安装 vue 外，还可以使用 vue-cli「脚手架工具」
vue-cli 是一个脚手架工具「就是一个工具集合，可以快速的创建一个 vue 项目」
同样使用 yarn/npm 来安装 vue-cli，我们全局安装
npm install --global vue-cli
或者使用
yarn global add vue-cli
安装完以后，我们输入 vue -V 查看是否安装成功，或使用 vue-list 查看
看到上面内容则证明我们的 vue-cli 脚手架工具安装成功了
3、使用 vue-cli 来创建一个项目
- 1、新建一个目录，我这里放在桌面「我以 mac 电脑演示，win 同理」
cd Desktop
mkdir myvuedemo
cd myvuedemo
- 2、使用 vue-cli 创建项目
vue init webpack myfirstvuedemo
这里的 vue 项目是基于 webpack 的，使用上述命令我就可以创建一个名为 myfirstvuedemo 的 vue 项目
当我们输入上述命令以后就会开始下载模版，然后会提示输入项目名「自己写一个即可」，完了一路回车，出现 yes 就直接回车「目前先这样搞，别管为什么，但是如果看过我的 react 教程就会了解，最后提示使用 npm 还是 yarn 来管理包，我选择的是 yarn」
安装完依赖以后，就会出现下面的命令
如图所示，我们成功创建出了项目，如果大家使用 npm 或是 yarn 出现安装不了的情况，那么切换一下源即可「tabao 的源就非常不错」，我们根据上面的提示，进入到项目中，然后运行一下项目看看结果
- 3、运行项目
cd myfirstvuedemo
然后运行
yarn run dev
我们就会看到使用 webpack 启动服务，然后编译，完成以后提示项目运行的地址：默认是—http://localhost:8080
我们在浏览器中输入 http://localhost:8080 回车，看结果
怎么样，我们使用 vue-cli 就成功创建出一个 vue 项目，只不过他默认的主页是 Vue 的一些介绍，要搞成自己项目修改即可「后面说到 vue-cli 创建项目会说到的」，怎么样？脚手架创建项目简单吧「建议初学者不要直接使用 vue-cli 来创建项目，而是引入vue.js 来使用，后面熟练了再使用 vue-cli」
三、Vue 开发工具
- 1、webstorm
- 2、sublime
- 3、atom
- 4、Visual Studio Code[即 vscode]
对于开发工具来说，没有最好，只有最合适，完全看个人习惯，有的就习惯使用 vim 开发「你咬我呀」,我个人习惯于使用 atom 和webstrom
到此为止，我们把 vue 的环境就简单的搭建起来了，快来试一下吧
更多文章等着你，欢迎关注我的公号
共同学习，写下你的评论
评论加载中...
作者其他优质文章
