VUE.JS 框架配置详细版(IDEA)

安装node.js
 1. 下载地址:node.js
 2. 请下载对应的系统和对应的系统位数
 3. 软件下载完成后,打开安装界面,一直点击Next即可,无需过多配置。


检查安装是否成功
 1. 安装完成后,打开cmd命令,输入node -vnpm -v
 2. 这个两个命令是检测node.js是否安装成功
 3. 显示版本号,说明已经安装成功了


安装脚手架(vue.js)
 1. 由于vue使用的是国外的脚手架导致下载速度很慢,所以将脚手架地址改为国内的脚手架,就可以让下载速度变快
 2. 一般国内使用的脚手架是阿里云镜像文件(https://registry.npm.taobao.org)
 3. 更改下载源为阿里镜像文件地址:npm install -g cnpm --registry=https://registry.npm.taobao.org


vue-cli3安装
 1. 脚手架安装完成后,我们要对vue.js配置
 2. 在对vue.js配置前,需安装vue-cli3:cnpm install -g @vue/cli
在这里插入图片描述
 3. vue-cli3安装完成后,在cmd命令行中输入:vue ui
 4. 在cmd窗口中会显示网址,复制到游览器中打开:http://localhost/8000
在这里插入图片描述
 5. 运行之后会自动跳转至vue可视化视图窗口,我们选择(+ 创建 )来进行vue的配置
在这里插入图片描述
 6. 点击小红框里面的按钮,有一个新建文件夹,点击创建一个文件夹
 7. 关于路径是C:盘的问题,这里是因为node.js默认安装在C盘,那么在新建vue项目时,所以就会默认选择C盘
 8. 在后续进行新建vue项目时,可以指定C盘以外的其他盘来创建vue项目
在这里插入图片描述
 9. 这里随意填写文件夹的名字,能记住那种(这里写的是VueDemo)
在这里插入图片描述
 10. 创建完文件夹(VueDemo)后,就开始创建一个新的vue项目。
在这里插入图片描述
在这里插入图片描述
项目文件夹:创建项目文件夹(vuedemo1)
包管理器:默认
更多选项:默认不勾选
    GIT:默认勾选,这里设为不勾选 (GIT是团队开发的项目代码管理器)

在这里插入图片描述
 这里选择手动(手动配置项目)。
在这里插入图片描述


在这里插入图片描述
 只需要选择第二行改为第三个选项(ESLint + Standard config)
 其他默认即可

在这里插入图片描述
 最后保存为新预设时,将预设名改为默认配置
 在点击保存预设并创建项目

在这里插入图片描述
新的vue项目已经创建成功,会自动跳转至管理页面

在这里插入图片描述
关闭管理页面,打开IDEA,使用IDEA打开vue项目。


 打开IDEA,随意的打开一个项目,找到左上角的File展开,里面有一个Open,然后找到新增的vue项目的位置

在这里插入图片描述
 这里选择new window(新的窗口)
在这里插入图片描述

 这里特别注意几点:(只针对第一次引用vue项目的来做讲解)
 第一点:将src展开,点击App.vue,你会发现是灰色的,App.vue里面最上角有一条新增vue.js的消息,我们点击I开头的英文单词,就会自动的安装vuejs
在这里插入图片描述

在这里插入图片描述

 第二点:安装vuejs成功后,IDEA又会在右下角显示一条消息,点击带颜色的字,点击后IDEA就会自动的退出,IDEA会自动启动,启动后你会发现,灰色已经变成了有颜色了
在这里插入图片描述
这是由于我们是在cmd命令行中生成的vue.js项目,而在idea中我们没有安装vue.js这个插件,所以界面变成了灰色。
在这里插入图片描述
 接下来来创建一个vue的页面,这里使用的是Element组件,先将Element前端框架引入至IDEA
在这里插入图片描述
点击IDEA左下角的Terminal 这是IDEA的命令窗口
在这里插入图片描述
输入添加element的组件命令:npm install element-ui --save
在这里插入图片描述
展开vue项目,找到package.json双击打开,找到红框的地方,就说明已经添加成功了
在这里插入图片描述

之后会写几个vue项目几个常用的小功能,未完待续…


番外篇
 在cmd新增vue项目,经过前面的配置,已经预设好了一个默认配置,我们在新增时选择默认配置创建vue项目即可。

 创建vue的项目是的保存路径是C盘,如果想替换为其他盘,我们在cmd命令行中输入 (cmd中的命令行地址默认为:C盘) D:
在这里插入图片描述
 要具体到某个文件夹,加入cd vuedemo 回车即可(这里有一个小快捷方式,如打如文件夹名称前面vue,按下tab键会自动补全文件夹名称,然后回车进入你需要创建Vue项目的保存地址

在这里插入图片描述
 然后在输入vue create 项目名称,开始新建vue项目。

								vue create 项目名称(自取的项目名称)

 创建的GIF,过程有点长我就暂停了,里面包含了怎么新建,已经Open到IDEA中

在这里插入图片描述

  作者(我)也是学vuejs不久,如有某些地方没有讲清楚的没有讲明白的,请在下方留言。
  在看见之后就会进行一一回复,耐心的对问题进行解答,最后大家一起学习IDEA和vue.js

杉 言 PyTorch 算法 神经网络