YaolongHan 4 anni fa
parent
commit
598843788f

+ 4 - 0
docs/.vuepress/config.js

@@ -49,6 +49,10 @@ module.exports = {
                                 text: "Node.js",
                                 link: "/setup/ide/nodejs"
                             },
+                            {
+                                text: "vue-cli",
+                                link: "/setup/ide/vuecli"
+                            },
                         ]
                     },
                     {

BIN
docs/setup/ide/img/vscode_001.jpg


BIN
docs/setup/ide/img/vscode_002.jpg


BIN
docs/setup/ide/img/vscode_003.jpg


BIN
docs/setup/ide/img/vscode_004.jpg


BIN
docs/setup/ide/img/vscode_005.jpg


BIN
docs/setup/ide/img/vscode_006.jpg


BIN
docs/setup/ide/img/vscode_007.jpg


BIN
docs/setup/ide/img/vscode_008.jpg


BIN
docs/setup/ide/img/vscode_009.jpg


BIN
docs/setup/ide/img/vscode_010.jpg


BIN
docs/setup/ide/img/vscode_011.jpg


BIN
docs/setup/ide/img/vscode_012.jpg


BIN
docs/setup/ide/img/vuecli_001.jpg


BIN
docs/setup/ide/img/vuecli_002.jpg


+ 36 - 1
docs/setup/ide/vscode.md

@@ -2,4 +2,39 @@
 
 ::: details 目录
 [[toc]]
-:::
+:::
+
+## 下载
+### 官网下载
+下载页面:[https://code.visualstudio.com/Download](https://code.visualstudio.com/Download)
+![安装 idea](./img/vscode_001.jpg)
+## 安装
+运行安装程序“visualstudio” <br/>
+![安装运行 idea](./img/vscode_002.jpg)<br/>
+
+![安装运行 idea](./img/vscode_003.jpg)<br/>
+
+![安装运行 idea](./img/vscode_004.jpg)<br/>
+
+![安装运行 idea](./img/vscode_005.jpg)<br/>
+
+## 初次启动
+![安装运行 idea](./img/vscode_006.jpg)
+## 安装插件
+vscode是一个轻量级的编辑器,你需要根据自己的开发需要下载合适的插件;这样可以达到事半功倍的效果。<br/>
+### 以下为常用的开发插件:
+#### Chinese
+![安装运行 idea](./img/vscode_007.jpg)<br/>
+#### Auto Close Tag
+![安装运行 idea](./img/vscode_008.jpg)<br/>
+#### Vue 2 Snippets
+![安装运行 idea](./img/vscode_009.jpg)<br/>
+#### Vutur
+![安装运行 idea](./img/vscode_010.jpg)<br/>
+### 其他常用插件还有:
+Live Server; Eslint; Javascript(ES6)code Snippets; open in browser ;
+## 开始使用
+
+![安装运行 idea](./img/vscode_011.jpg)<br/>
+
+![安装运行 idea](./img/vscode_012.jpg)<br/>

+ 38 - 0
docs/setup/ide/vuecli.md

@@ -0,0 +1,38 @@
+# vue-cli
+::: details 目录
+[[toc]]
+:::
+## 前言
+
+vue-cli 是基于vue为核心的开发脚手架。可以方便开发人员快速的建立项目进入开发。<br/>
+我们将结合上述的 vscode 编辑器 通郭vue-cli 项目搭建起前端开发项目。
+## 前提
+本地有稳定 nodejs 环境;
+## 下载
+### 官网地址
+链接:[https://cli.vuejs.org/zh/](https://cli.vuejs.org/zh/)
+
+## 安装
+### 安装
+```
+npm install -g @vue/cli
+# OR
+yarn global add @vue/cli
+```
+创建一个项目:
+
+```
+vue create hello-world
+```
+### 配置
+vue create project 时会出现选项,可根据自己的项目自行配置
+
+![安装运行 idea](./img/vuecli_001.jpg)<br/>
+
+![安装运行 idea](./img/vuecli_002.jpg)<br/>
+
+## 启动
+```
+cd  my-project
+npm run serve
+```

+ 1 - 0
docs/setup/index.js

@@ -5,6 +5,7 @@ const content = [
             ["/setup/ide/nodejs", "Node.js"],
             ["/setup/ide/idea", "IDEA"],
             ["/setup/ide/vscode", "VS Code"]
+            ["/setup/ide/nodejs", "vue-cli"],
         ]
     },
     {