【超值，超详细】VSCode配置Python环境教程+引入Vuetify框架完整教程

一、VSCode安装及配置教程：【以Windows为例】
1、官方下载网址：https://code.visualstudio.com/,选择Download for windows【可以选择操作系统】傻瓜式安装,

2、待下载完成后安装下载文件：右键管理员权限启动后出现弹窗-确定-傻瓜式安装

3、切换成中文：ctrl+shift+p出现搜索输入框，输入config,选择（下载简体中文并重启）：
选择中文后会出现个.json文件不要删除那个是语言控制显示语言的

4、安装插件，选择左边导航栏图标，输入插件名称并执行安装：

5、各种实用插件：
1）Auto Close Tag(自动闭合HTML/XML标签)；
2）Auto Rename Tag(自动完成另一侧标签的同步修改)；
3）Beautify (格式化 html,js,css);
4）Break Pair Colorize(给括号加上不同的颜色，便于区分不同的区块)；
5）Debugger for Chrome(映射vscode上的断点到chrome上，方便调试)；
6）ESLint(js语法纠错，可以自定义配置)；
7）Vetur(Vue多功能集成插件，错误提示等)
8）open in browser(html文件在浏览器中打开)

6、在使用过程中的一些配置项：
1）需要勾选自动保存功能：点击文件-选择自动保存；
2）vue项目文件是通过在指定目录先创建文件夹在用vscode打开；
3）视图放大Ctrl + “+”, 缩小 Ctrl + “-”；
4）打开终端命令行模式：Ctrl + “~”;

二、在VSCode中配置Python环境
1、在vscode插件下载：python并执行安装；
2、在D盘vescode下新建文件夹，并用vscode打开则为工作区域；
3、添加配置文件：（点击设置后在python目录下会出现settings.json）

点击设置后在python目录下会出现settings.json,输入：

4、python下载插件：在.vscode下新建.py文件，并下载插件
flake8会检查编写代码时的不规范地方和语法错误；
yapf是一个 代码格式化工具，可以一件美化Alt+shift+F

三、VScode引用Vue教程：
1、先进入vue.js官网进行查询，并点击起步进行查看：
2、选择导航栏安装并查看安装方法-下载开发版本：

3、下载完成后打开存放目录下的vue.js文件并引入，左边文件夹下出现下载 的vue.js文件；
新建html文件：！+ “回车” 新建html标准格式；
输入文件中的代码 ，右键用浏览器打开，页面展示成功说明vue引入成功。

四、引入Vuetify框架教程：
1、先要安装node.js并配置环境变量：
下载地址：https://nodejs.org/en/download/，选择对应操作系统点击

按照步骤安装完成后，将node.js配置到环境变量中，一般会自动安装所以检查下：

2、校验node.js是否安装成功：
1）打开vscode,Ctrl+"~"打开终端分别输入node -v、npm -v显示版本号书名安装成功

2）设置npm全局插件和缓存路径，不设置则默认在C:\Users\huijuan\AppData\Roaming\npm下
新建文件夹：【node_cache】、【node_global】

npm config set prefix D:\Program\nodejs\node_global 路径可根据自己存储位置修改
npm config set cache D:\Program\nodejs\node_cache 路径可根据自己存储位置修改
3、使用npm工具安装vue-cli插件，显示版本号说明安装成功：
npm install @vue/cli -g

验证是否安装成功: vue -V，显示版本号则成功：

4、启用vue ui 配置项目：【vue版本太低的没有ui功能卸载安装最新版本】
1）打开终端输入 vue ui (在浏览器中会打开配置页面)：

2）点击创建新项目，选好路径，【包管理器选择npm】：

3）手动配置初始化预设，选择手动并点击下一步：

4）需要启用的功能项：
Router路由管理需要用到；Vuex资源池管理需要用到

启用CSS Pre-processors，启用使用配置文件 并点击下一步

创建项目且不保存预设名
等待创建完成后就能展示ui上所创建的项目了：

5）在vue ui上下载vuetify插件：并完成安装

在vue ui上下载axios插件：并完成安装

5、项目结构讲解：

1）node_modules：文件中放置下载的插件及安装包；
2）public：放置静态资源文件；
3）src：开发中需要频繁改动的文件夹；

i、assets：主要放置开发所需要的图片及css重置所需要的文件；
ii、components：存放组件的位置，文件名以.vue结尾，vue将组件转化为HTML格式
【浏览器只能识别HTML格式】组件分为：template-HTML，script-CSS；
iii、plugins：放置下载的插件

iv、router路由管理，在地址栏输入什么即跳转到哪个界面均在index.js中配置：
v、main.js项目入口文件：

vi：package.json，git执行上传下载只用下载这里面标记的内容即可
6、运行项目，文件夹处右键打开终端并输入：npm run serve