安装软件

Visual Studio Code

软件网址：https://code.visualstudio.com/

安装插件

Chinese (Simplified) (简体中文)

Easy LESS（自动将less转化成css文件，需要配置）

配置：
第一，文件 > 首选项 > 设置

第二，在扩展里面找到Easyless点一下 setting.json

第三，在json配置中加入，less.compile(less配置)

open in browser（编辑器菜单右键html，在默认浏览器打开了）

Live Server （实时加载功能）

Auto Rename Tag （自动补齐，修改标签对）

AutoFileName（自动补全路径）

Beautify（格式化，自动对齐）

ES7+ React/Redux/React-Native snippets（快速生成代码块）

Vetur（vue2语法高亮）

Vue Language Features (Volar) 简称volar（vue3语法高亮）

vscode-icons （VsCode中的图标插件，可以控制vscode中的文件管理的树目录显示图标）

HBuilderX

https://www.dcloud.io/hbuilderx.html

轻便的编辑器

你需要一个框架，来帮助你适配目前市场上较为热门的所有平台，这个框架，就是：uni-app。

Node环境的安装

Node的安装分为两种方式：直接安装和NVM安装。

nvm方式安装

NVM(Node version Manager) 一个用于管理Node多版本的工具。

安装过node的，需要先卸载之前安装的node

安装nvm

下载地址：https://github.com/coreybutler/nvm-windows/releases

建议安装

nvm-noinstall.zip：绿色免安装版，但使用时需进行配置。
nvm-setup.zip：安装版，推荐使用

查询是否安装成功

设置nvm的镜像地址

打开nvm的安装目录

一般的路径是在 C:/用户/XXX/AppData/Roaming/nvm

打开里面的对里面的镜像地址进行设置

安装node

win + R 打开命令行工具

查看是否已经下载node或者查看已经安装的版本

下载指定版本

node的中文官方地址：https://nodejs.org/zh-cn/download/ 或者 http://nodejs.cn/download/

切换指定版本

查看当前node版本

node 运行文件

npm的操作

在安装Node的时候就已经”捆绑”安装了。只需要在cmd中输入就能看到当前的npm的版本号。

初始化项目（新项目都需要初始化）

下载需要的第三方模块（库）

在https://npmjs.com 查找对应的文档学习如何使用下载下来的模块。

npm的安装模式

热启动 nodemon

安装：

使用

全局安装了nodemon后，只需要把node命令换成nodemon即可

npm镜像

如果下载模块很慢，一般就是网络问题。npn默认也是到国外下载包的，所以我们可以手动修改其下载的源

yarn

一个新的 JS 包管理工具，旨在取代 npm 这种包管理工具。

官网：
https://yarnpkg.com/en/docs

中文参考链接：
https://yarn.bootcss.com/

安装

常用命令：

npm	yarn
npm init -y	yarn init -y	初始化项目
npm install react –save	yarn add react	下载安装（添加依赖包）开发依赖安装
npm uninstall react –save	yarn remove react	卸载模块
npm install react –save-dev	yarn add react –dev	生产依赖安装
npm update –save	yarn upgrade	升级依赖包
npm install -g nodemon	yarn global add nodemon
npm install	yarn install	安装全部依赖
npm list -g		查看所有全局安装的模块

yarn 全局安装后，命令不生效

背景：

执行 bash…`， vue 命令依然不生效
而 npm 全局安装（npm install -g nodemon）后，命令生效

原因：没有进行环境变量的配置

解决办法：

1.执行如下命令，得出 yarn 全局安装的命令所处的安装目录

2.复制安装目录至电脑的环境变量中

系统>高级系统设置>环境变量>系统变量 Path>新增

3.重新启动终端，发现全局命令行可以生效了

pug模板实现ssr

express官方推荐使用pug模板引擎来实现ssr

安装

【pug官方文档】](https://pugjs.org/api/getting-started.html)

数据库

phpstudy

phpstudy官网

vue

安装vue

使用npm安装

查询vue的版本

如果出现以下报错：

无法加载文件

Webpack

安装Webpack

webpack是一个静态模块打包工具

主要打包vue cli创建的项目

要想让我们写好的模块化代码在各式各样的浏览器上能做到兼容，就必须借助于其他工具；而webpack的其中一个核心就是让我们可以进行模块化开发，并帮我们处理模块间的依赖关系。不仅仅是Javascript文件，我们的css、图片、json文件等在webpack中都可以当作模块来使用，这就是webpack的模块化概念。

安装

要使用，那么必然需要安装、:

新建配置文件

第一步：单独新建一个webpack的配置文件,把项目需要的webpack配置写入进去。

webpack.config.js

第二步：新建入口文件：

src/main.js

src/animal.js

第三步：增加项目启动命令：

package.json

第四步：执行命令

安装插件 plugins

可以用于执行范围更广的任务。从打包优化和压缩，资源管理，一直到重新定义环境中的变量等。

命令行执行：