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

VUE.JS框架配置详细 IDEA

杉言

8113人浏览 · 2019-07-26 09:36:52

杉言 · 2019-07-26 09:36:52 发布

安装node.js
1. 下载地址:node.js windows 64位
2. 请下载对应的系统和对应的系统位数
3. 软件下载成功后，打开安装界面，一直点击Next即可

检查安装是否成功
1. 安装完成后，打开cmd命令，输入node -v与npm -v
2. 显示版本号，说明已经安装成功了

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

vue-cli3安装
脚手架安装完成后，我们要对vue.js配置
在对vue.js配置前，需安装vue-cli3：cnpm install -g @vue/cli

在这里插入图片描述

vue-cli3安装完成后，在cmd命令行中输入：vue ui
在cmd窗口中会显示网址，复制到游览器中打开：http://localhost/8000

在这里插入图片描述

运行之后会自动跳转至vue可视化视图窗口，我们选择(+ 创建 )来进行vue的配置

在这里插入图片描述

6. 点击小红框里面的按钮,有一个新建文件夹，点击创建一个文件夹
7. 关于路径是C:盘的问题，这里是因为node.js默认安装在C盘，那么在新建vue项目时，所以就会默认选择C盘
8. 在后续进行新建vue项目时，可以指定C盘以外的其他盘来创建vue项目

在这里插入图片描述

这里随意填写文件夹的名字，能记住那种(这里写的是VueDemo)

在这里插入图片描述

创建完文件夹(VueDemo)后，就开始创建一个新的vue项目

在这里插入图片描述

项目文件夹：创建项目文件夹(vuedemo1)
包管理器：默认
更多选项：默认不勾选
GIT：默认勾选，这里设为不勾选

在这里插入图片描述

这里选择手动，手动配置项目

在这里插入图片描述

功能界面需要勾选的有4个
第一个：Babel JavaScript 编译器
第二个：Router Vue的路由管理器
第三个：Linter / Formatter
第四个：使用配置文件

在这里插入图片描述

只需要选择第二行改为第三个选项(ESLint + Standard config)
其他默认即可

在这里插入图片描述

最后保存为新预设时，将预设名改为默认配置
在点击保存预设并创建项目

在这里插入图片描述

新的vue项目已经创建成功，会自动跳转至管理页面

在这里插入图片描述

关闭管理页面，打开IDEA，使用IDEA打开vue项目。

打开IDEA，随意的打开一个项目，找到左上角的File展开，里面有一个Open，然后找到新增的vue项目的位置
选中项目名称(注意是项目名称，不是项目路径)，点击OK。

在这里插入图片描述

这里选择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中

在这里插入图片描述

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^