# 运维开发

## 第一天 配置开发环境

### 安装WebStorm

官网地址:https://www.jetbrains.com/

进入到WebStorm的下载地址，由于我是windows10设备，故下载windows版

下载链接：https://www.jetbrains.com/webstorm/download/download-thanks.html?platform=windows

安装时一直选择默认即可。

### 配置WebStorm

在主页面选择问号搜索插件
安装以下四个插件即可

- Atom One Theme, 
- Chinese (Simplified) Language Pack, 
- Atom Material Icons, 
- Code Glance

### 安装node.js

官方网站地址：https://nodejs.org/zh-cn/
![](https://15dingzhen-1305072892.cos.ap-guangzhou.myqcloud.com/yunwei20221015231044.png)

此处我们选择长期维护版,该网站会根据当前设备自动下载与之相匹配版本。
下载好后全部选择默认安装。

使用管理员身份打开命令提示符，输入node -v即可显示安装的nodejs版本号，即安装成功

![](https://15dingzhen-1305072892.cos.ap-guangzhou.myqcloud.com/yunwei20221015231644.png)

### 安装Vue

官方链接:https://cn.vuejs.org/

![](https://15dingzhen-1305072892.cos.ap-guangzhou.myqcloud.com/yunwei20221015232130.png)

点击安装，即可进入官方安装指导界面

用管理员身份打开任务管理器，输入:npm init vue@latest

![](https://15dingzhen-1305072892.cos.ap-guangzhou.myqcloud.com/yunwei20221015232842.png)

这一指令将会安装并执行 [create-vue](https://github.com/vuejs/create-vue)，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示

如果不确定是否要开启某个功能，你可以直接按下回车键选择 NO

![](https://15dingzhen-1305072892.cos.ap-guangzhou.myqcloud.com/yunwei20221015233050.png)

按照顺序执行Done. Now run: 下的三条绿色命令
cd hello_world
npm install
npm run dev

![](https://15dingzhen-1305072892.cos.ap-guangzhou.myqcloud.com/yunwei20221015233246.png)

出现一个网站和端口，进去这个网址看看

即可进入我们Vue的网页显示界面

![](https://15dingzhen-1305072892.cos.ap-guangzhou.myqcloud.com/yunwei20221015233403.png)



文件夹结构

node_modules library root   库目录
public   发布目录
assets   静态资源目录(CSS,Fonts)
components   组件目录
router   路由器目录
stores   状态
views   页面视图