qinshan.top

Appearance

第2章 准备开发与调试环境 ​

2.1 安装Vue.js ​

nodejs安装与简单使用 ​

SH
# 官网：https://nodejs.org/en，LTS是英文“Long Term Support”的缩写，意思是长期支持

# 下载NodeJs(node-v20.11.1-x64.msi)并安装到C:\All\Soft\nodejs

# npm会随nodejs一起安装，安装完可以查看安装在哪里了，查看版本号
where node
node -v
npm -v

# 使用国内npm源
# npm config set registry http://npm.inhuawei.com
npm config set registry https://registry.npm.taobao.org

# 安装vue-cli脚手架
npm install -g @vue/cli
vue --version

# 创建项目并运行，注意项目名称为全英文小写
# 方式一：命令行
vue create vuedemo
cd vuedemo
npm run serve

# 方式二：图形化界面http://localhost:8000
vue ui

# Chrome访问：http://127.0.0.1:8080/

2.1.1 使用CDN ​

CDN的全称是Content Delivery Network，即内容分发网络，核心是全局负载均衡DNS。

CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

html
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>

2.1.2 使用npm ​

NPM(Node Package Manager)，NodeJS包管理和分发工具。已经成为了非官方的发布Node模块（包）的标准。2020年3月17日，Github宣布收购npm，GitHub现在已经保证npm将永远免费。

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的javascript运行环境。让javascript 运行在服务端的开发平台，成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。Node.js已经集成npm，只要安装了Nodejs，npm也就一并安装好了，Node.js官网：https://nodejs.org 。LTS为长期支持版本，Current为最新版本，一般建议下载LTS版本。

下载并安装node.js，通过node -v、 npm -v 可以查看node.js与npm版本。

shell
# 配置淘宝源后安装
# 安装最新npm
npm install npm@latest -g

2.1.3 使用VueCLI ​

Vue的脚手架工具，可以提供一个基本的前端开发框架。

shell
# 本地安装vue
npm install vue@next
# 全局安装vue
npm install vue@next -g
# 全局安装vue，install可简化为i
npm i vue@next -g
# 更新vue
npm update vue@next
# 卸载vue
npm uninstall vue@next

2.1.4使用Vite ​

下一代的Web开发构建工具，更高性能。

2.2 学习Vue 3.0的源码 ​

访问Github: https://github.com/vuejs/core

2.3 安装VSCode(Visual Studio Code) ​

下载并安装，官网：https://code.visualstudio.com/

VSCode左侧边Extension需要安装的插件：

  • Vetur：语法高亮
  • ESLint：格式化
  • Code Runner：编辑器中右键运行

2.4 安装vue-devtools ​

有两种方式：

2.5 小结 ​

VueCli脚手架工具可以快速搭建前端基本框架，也集成了构建工具等一整套解决方案，可以让开发者用很少的配置，开发构建完整的应用，大大提升效率。