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

admin管理员组

文章数量:1794759

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

一、VSCode安装及配置教程：【以Windows为例】 1、官方下载网址：code.visualstudio/,选择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并配置环境变量： 下载地址：nodejs/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

本文标签： 教程框架完整环境详细