主页:​写程序的小王叔叔的博客​​欢迎来访

支持:点赞搭建VUE项目及开发环境_VUE搭建VUE项目及开发环境_VUE_02​收藏搭建VUE项目及开发环境_盘符_03关注搭建VUE项目及开发环境_VUE_04

一、.安装vue开发环境及所有插件

1、下载nodejs    

https://nodejs.org/en/

搭建VUE项目及开发环境_盘符_05搭建VUE项目及开发环境_css_06

2、设置nodejs

prefix(全局)和cache(缓存)路径

2.1在nodejs安装路径下,新建node_global和node_cache两个文件夹

搭建VUE项目及开发环境_盘符_07搭建VUE项目及开发环境_css_08

2.2设置缓存文件夹 【盘符 + 文件夹名 均可以自己命名,建议英文驼峰标示 2.2和2.3一定要一样

npm config set cache "D:\vueProject\nodejs\node_cache"

搭建VUE项目及开发环境_css_092.3设置全局模块存放路径【盘符 + 文件夹名 均可以自己命名,建议英文驼峰标示】

npm config set prefix "D:\vueProject\nodejs\node_global"

搭建VUE项目及开发环境_VUE_10搭建VUE项目及开发环境_盘符_11

3、 安装cnpm(淘宝镜像)

在安装的工作空间【2.2 + 2.3】内进行安装淘宝镜像

:大家一定要把npm和cnpm的放到相同的目录下;我的是在"2.2、  2.3、",大家谨记教诲出现问题一定要切换到安装目录,将npm和cnpm放到同一个目录下,避免出错】

npm install -g cnpm --registry=https://registry.npm.taobao.org

搭建VUE项目及开发环境_VUE_12安好后如图:

搭建VUE项目及开发环境_VUE_13搭建VUE项目及开发环境_VUE_14

安装好,用 .\cnpm -v 进行检测是否成功,当前文件夹下会出现几个文件夹,

搭建VUE项目及开发环境_css_15搭建VUE项目及开发环境_VUE开发环境_16

搭建VUE项目及开发环境_环境变量_17搭建VUE项目及开发环境_css_18

 4、设置环境变量

说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径
1、鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。
2、修改系统变量PATH NODE_PATH

搭建VUE项目及开发环境_VUE开发环境_19搭建VUE项目及开发环境_css_20

搭建VUE项目及开发环境_盘符_21搭建VUE项目及开发环境_盘符_22

5、安装Vue

如下图

cnpm install vue -g

搭建VUE项目及开发环境_盘符_23搭建VUE项目及开发环境_css_24

6、安装vue-cli 脚手架

cnpm install vue-cli -g

搭建VUE项目及开发环境_VUE开发环境_25搭建VUE项目及开发环境_环境变量_26

以下是新产生的文件

搭建VUE项目及开发环境_盘符_27搭建VUE项目及开发环境_环境变量_28

【以上vue开发环境就是全部过程,接下来 开始创建vue相关项目】

二、.安装VSCode

安装VSCode( 官网https://code.visualstudio.com/Download)

搭建VUE项目及开发环境_VUE开发环境_29搭建VUE项目及开发环境_环境变量_30

安装之后使用:

搭建VUE项目及开发环境_VUE开发环境_31搭建VUE项目及开发环境_环境变量_32

搭建VUE项目及开发环境_VUE开发环境_33搭建VUE项目及开发环境_VUE_34

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

搭建VUE项目及开发环境_css_35vscode终端处不显示内容:

搭建VUE项目及开发环境_css_36搭建VUE项目及开发环境_盘符_37

解决:桌面 vscode的快捷键,打开“兼容性”标签,勾选"以管理员身份运行此程序

搭建VUE项目及开发环境_VUE开发环境_38搭建VUE项目及开发环境_css_39

三、.创建vue项目

3.1、命令行创建vue项目

搭建VUE项目及开发环境_VUE开发环境_40搭建VUE项目及开发环境_环境变量_41

输入npm install下载安装项目的依赖

搭建VUE项目及开发环境_VUE开发环境_42搭建VUE项目及开发环境_VUE_43

搭建VUE项目及开发环境_VUE开发环境_44搭建VUE项目及开发环境_VUE_45

3.2、运行vue项目

npm install先检查和下载依赖,然后输入npm run dev运行项目

搭建VUE项目及开发环境_VUE开发环境_46搭建VUE项目及开发环境_盘符_47

运行后的浏览器效果

搭建VUE项目及开发环境_VUE开发环境_48搭建VUE项目及开发环境_盘符_49

vscode卸载及安装vue版本

卸载
npm uninstall vue-cli -g

安装
npm install vue-cli -g


在package.json中添加指定版本号
"element-ui": "^2.10.1",


搭建VUE项目及开发环境_环境变量_50搭建VUE项目及开发环境_css_51






转载声明:本文为博主原创文章,未经博主允许不得转载

搭建VUE项目及开发环境_VUE开发环境_52⚠️注意 ~

💯本期内容就结束了,如果内容有误,麻烦大家评论区指出!

如有疑问❓可以在评论区💬或私信💬,尽我最大能力🏃‍♀️帮大家解决👨‍🏫!

如果我的文章有帮助到您,欢迎点赞+关注✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~