主页:写程序的小王叔叔的博客欢迎来访👀
支持:点赞
收藏
关注
一、.安装vue开发环境及所有插件
1、下载nodejs
2、设置nodejs
prefix（全局）和cache（缓存）路径
2.1在nodejs安装路径下，新建node_global和node_cache两个文件夹
2.2设置缓存文件夹 【盘符 + 文件夹名 均可以自己命名，建议英文驼峰标示 2.2和2.3一定要一样】
npm config set cache "D:\vueProject\nodejs\node_cache"
2.3设置全局模块存放路径【盘符 + 文件夹名 均可以自己命名，建议英文驼峰标示】
npm config set prefix "D:\vueProject\nodejs\node_global"
3、 安装cnpm（淘宝镜像）
在安装的工作空间【2.2 + 2.3】内进行安装淘宝镜像
【注：大家一定要把npm和cnpm的放到相同的目录下;我的是在"2.2、 2.3、",大家谨记教诲出现问题一定要切换到安装目录，将npm和cnpm放到同一个目录下，避免出错】
npm install -g cnpm --registry=https://registry.npm.taobao.org
安好后如图：
安装好，用 .\cnpm -v 进行检测是否成功，当前文件夹下会出现几个文件夹，
4、设置环境变量
说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径
1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。
2、修改系统变量PATH NODE_PATH
5、安装Vue
如下图
cnpm install vue -g
6、安装vue-cli 脚手架
cnpm install vue-cli -g
以下是新产生的文件
【以上vue开发环境就是全部过程，接下来 开始创建vue相关项目】
二、.安装VSCode
安装VSCode（ 官网https://code.visualstudio.com/Download）
安装之后使用：
vscode 有一些对开发时应用较好的插件，可以直接安装：（根据个人情况选择安装）
文件图标 vscode-icons
暗色主题 One Dark Pro
代码美化 Beautify
代码检查工具 ESLint
必备调试工具 Debugger for Chrome
万能语言运行环境 Code Runner
快速注释 Document This
CSS 类名智能提示 IntelliSense for CSS class names in HTML
代码拼写检查 Code Spell Checker
备忘插件 TODO Highlight
代码格式化工具 prettier
vue语法的高亮 vetur
vscode汉化 Simplified Chinese Language Pack
文件及文件夹图标 VSCode Great Icons
vscode终端处不显示内容：
解决：桌面 vscode的快捷键，打开“兼容性”标签，勾选"以管理员身份运行此程序
三、.创建vue项目
3.1、命令行创建vue项目
输入npm install下载安装项目的依赖
3.2、运行vue项目
npm install先检查和下载依赖，然后输入npm run dev运行项目
运行后的浏览器效果
vscode卸载及安装vue版本
卸载npmuninstallvue-cli-g安装npminstallvue-cli-g在package.json中添加指定版本号"element-ui": "^2.10.1",
转载声明：本文为博主原创文章，未经博主允许不得转载
⚠️注意 ~
💯本期内容就结束了，如果内容有误，麻烦大家评论区指出！
如有疑问❓可以在评论区💬或私信💬，尽我最大能力🏃♀️帮大家解决👨🏫！
如果我的文章有帮助到您，欢迎点赞+关注✔️鼓励博主🏃，您的鼓励是我分享的动力🏃🏃🏃~
