前端技术分享
0%

【001】Vue基础学习：前期准备

发表于 更新于 分类于

学习Vue的前提条件

  • HTML的基础知识，比如基本元素的使用和结构代码的编写
  • CSS的基础知识，比如常见样式的编写和页面的布局
  • Javascript的基础知识，比如常见函数的使用
  • 如果能懂一点node 和 webpack，那就更好了

开发工具的选用

开发工具的选用并没有太多的要求，只要适合自己的就行，我在三年前使用的是WebStorm，现在使用的是VSCode。

安装和引入

在Vue官网中有两个版本，分别是：

  1. 开发版本：包含了完整的警告和调试模式
  2. 生产版本：删除了警告

1，安装方式一：直接用<script>引入（不推荐）

1
2
3
4
5
<!-- 最新版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 明确的版本号 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

2，安装方式二：使用npm进行安装（推荐）

打开cmd命令窗口，输入以下命令：

1
2
3
npm install vue
或：
npm i vue

注：

npm是随同NodeJS一起安装的包管理工具，新版的nodejs已经集成了npm，所以不需要另外安装npm，可以通过输入 “npm -v” 进行检测是否安装成功。

nodejs的安装方法比较简单，不懂的可以百度或谷歌，这里就不再阐述。

安装cnpm

由于用于npm的仓库源是在国外，资源传输速度较慢而且可能会受到限制，所以建议使用淘宝镜像源cnpm

打开cmd命令窗口，输入以下命令：

1
npm install -g cnpm -registry=https://registry.npm.taobao.org

执行完后，可输入以下命令进行检测cnpm是否安装成功：

1
cnpm -v

使用cnpm安装vue：

1
2
3
cnpm install vue
或：
cnpm i vue

执行完后，可输入以下命令进行检测Vue是否安装成功：

1
vue -V

总结

前期准备差不多就这些了，其中官网推荐在浏览器安装Vue Devtools，这个我想在后面需要用时再进行安装。还有脚手架vue-cli也会在Vue基础学完后进行使用。
好了，下一章就准备开始写vue了。