java中级学习篇——VUE脚手架+VUE里安装element ui

（ppt在csdn资源里）

下载网址私信（不方便写在此）>>>>>下载NOde.js>>>>>>>安装，直接全下一步>>>>>>>>命令提示符（控制台）执行以下命令（npm -v） 查看版本号

配置npm>>>>>>npm config set registry http://registry.npm.taobao.org

>>>>查看是否设置成功 npm config get registry（成功时显示网址）

>>>>安装vue—clin>>>>  npm install -g @vue/cli（出现以下已成功）>>>vue -V(查看vue/cli的版本号)

>>>>install安装   g全局安装，所有这个电脑的人都可以用。

3.1、创建工程

电脑上新建一个自己认识的文件夹，E盘 VUE-WorkSpace（名字自定义）     

{再次创建时 cd..        } 

 切换到对应盘 输入 e: >>>>>输入cd Vue-WorkSpace(检验是否为自己创建的文件夹)>>>>>>输入vue create 工程名称（vue create-vue-project-01 回车一次去等待，创建过程可能耗时较长，别按第二次）

创建过程中会有一些选项，最先提示的选项是 Please pick a preset ，表示“请选择一个预设项”，推 荐选择 Manually select features ，表示“手动选择”，通过键盘的上下箭头进行选择，选择到目标项 后按下键盘的 Enter 键到下一步：

接下来的选项是 Check the features needed for your project ，表示“选择你的工程中需要使用 的功能”，推荐在列表中选择 Babel 、 Router 、 Vuex 这3项，使用键盘的上下箭头移动，使用空格选 中或取消选中，选择完成后按下键盘的 Enter 键到下一步：

{关于列表中主要的几个功能： Babel ：ES6高级语法向低版本语法兼容的工具； Router ：路由管理器（管理请求路径与页面资源的映射关系，相关于Controller中 @RequestMapping）； Vuex ：全局状态管理工具（管理全局共享的内存中的数据，例如各页面需要使用到的用户信 息）； Linter ：初学者不建议勾选，是代码规范检验工具，其要求较严格。}

接下来的选项是 Choose a version of Vue.js that you want to start the project with ，表 示“选择你的工程中希望使用的Vue.js的版本”，推荐选择 2.x 这项，选择到目标项后按下键盘的 Enter 键到下一步：

接下来的选项是 Use history mode for router ，表示“是否在路由中选择历史模式”，推荐选择 “是”，输入 Y 后按下键盘的 Enter 键到下一步（提示信息中， Y 是大写的，表示它是默认选项，不输入 Y 而直接按下 Enter 键是等效的）：

接下来的选项是 Where do you prefer placing config for Babel, ESLint, etc.? ，表示“你习 惯把一些配置信息存放在哪里？”，推荐选择 In package.json ，即存放在 package.json 文件中，选 择到目标项后按下键盘的 Enter 键到下一步：

最后的选项是 Save this as a preset for future projects? ，表示“是否保存以上配置信息，作 为后续将创建的新工程的预设？”，推荐选择“否”，输入 N 后按下键盘的 Enter 键（提示信息中， N 是大 写的，表示它是默认选项，不输入 N 而直接按下 Enter 键是等效的）：

至此，配置过程已经结束，接下来会自动创建工程，耗时取决于网络速度，通常需要30秒至5分钟左 右。

成功————————————————————

---

 3.2. 启动服务

进入工程目录（项目创建成功出现两个命令最上面蓝字部分，先执行一，后执行二）  成功的样式

 当工程成功启动后，即可根据提示的URL在浏览器中进行访问：

使用idea启动服务：打开项目，下方输入命令

3.3. 停止服务

如果需要停止服务，在控制台使用Ctrl + C即可。 提示：当按下Ctrl + C后，会提示 "终止批处理操作吗(Y/N)?" ，其实，当按下Ctrl + C后，服务已经被停 止，在此提示中无论选择 Y 或 N 结果都已经不重要了。 

3.4. 重启服务

Vue脚本架工程启动的服务支持热部署（热更新，即：当保存对源代码的修改后，会自动重新编译打包 并覆盖原本已经启动的服务中的文件），并没有重启服务的做法，如果在某些场景中需要实现“重启”的 效果（例如修改服务端口等），可以先停止服务，然后再次启动服务。

3.5. 指定服务端口

此服务默认占用 8080 端口，如果端口已经被占用，将自动修改端口为 8081 或继续向后递增端口号。 如需手动修改端口号，在工程根目录下的 package.json 中修改 scripts 属性下 serve 的值： 例如改为使用 9090 端口：

则下次启动时会使用新设定的端口号： vue-cli-service serve --port 端口号

4、了解项目的内容

4.1. 工程结构 工程中主要的文件及文件夹有：

[.idea]：使用IntelliJ IDEA打开工程时会产生此文件夹，其中的文件都是IntelliJ IDEA管理此工程时 将使用到的，即使删除此文件夹，IntelliJ IDEA也会按需自动创建此文件夹及其下必要的文件 [node_modules]：工程中使用到的模块，也可以理解为工程的依赖项，例如Babel、Vue等框架 的文件，不手动管理，需要注意：如果是从Git或其它位置复制得到的工程，则工程可能没有此文 件夹，需要运行 npm install ，否则将无此文件夹及其下的各依赖项，工程将无法正常启动 本课程提供的资源中，各练习案例也不包含 node_modules 文件夹，均需要在各工程目录下 执行 npm install 后才可以正常运行 你也可以自行补充此文件夹

[public]：工程被编译打包后仍会保留的内容（文件内容可能会在编译打包过程中修改） index.html：默认的主页，通常不修改其内容。

[src]：页面源代码，除工程配置以外的所有开发都在此文件夹下 [assets]：资源文件夹，通常存放图片等

[components]：视图组件，通常是可以被其它各页面复用的，是各个 .vue 文件

[router]：路由控制 index.js：路由配置文件，除非工程中页面数量较大，或路由关系复杂，否则使用这1 个文件进行路由管理即可

[store]：全局共享的内存中的数据 index.js：暂不关注

[views]：视图组件 ，通常，每个页面在此文件夹都应该有1个对应的文件，可引用

[components]下的组件 App.vue：默认的主页视图组件

main.js：工程的主js文件，通常用于导入工程中将使用的其它库 此文件中所有 import 语句必须在最上方位置，各 import 语句不区分先后顺序

.gitigore：用于配置使用Git提交工程时，将忽略的文件和文件夹

bable.config.js：Babel的配置文件，在不熟悉的情况下不要手动修改此文件的配置

jsconfig.json：JS配置文件，可无视此文件

package.json：工程的管理配置文件，相当于Maven项目的pom.xml，在不熟悉的情况下不要手 动修改此文件的配置，可能需要关注的主要有：

        scripts：支持的2个npm命令参数，例如 npm run serve 、 npc run build

        dependencies：运行时依赖项

        devDependencies：开发依赖项，将不参与打包

package-lock.json：工程的管理配置文件，在不熟悉的情况下不要手动修改此文件的配置 README.md：工程的说明文档，用于开发人员编写如何使用、注意事项、更新日志等内容，使 用IntelliJ IDEA首次打开工程时，会自动打开此文件，此文件的默认内容中提示了工程的运行命令 vue.config.js：Vue的配置文件，在不熟悉的情况下不要手动修改此文件的配置

---

---

---

---

5.2. 安装ElementUI 首先进入工程文件夹

然后使用npm命令安装Element UI，注意：以下命令区分大小写，例如最后的 -S 的字母是大写的：（element-ui可换成其他框架）

npm i element-ui -S 

安装完成后，在工程的 main.js 中导入并使用Element UI：

// main.js

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI); 

 找到element页面的内容。

将script里面的东西，放在Template下面。

script上面的内容，放在DIV里面。

---

---

6、axios请求 

与此前的Element UI的安装方式类似，当需要安装axios时，应该先切换到VUE CLI工程的文件夹下，然 后再运行命令以安装axios，安装命令为

---

npm i axios -S               /           npm install --save axios

安装完成后，也需要在 main.js 中添加配置，配置代码为：

import axios from 'axios' Vue.prototype.axios = axios

---

【需求】 基于此前设计的登录页面，向后端服务器发起登录请求，如果登录成功，则跳转到主页（页面元素可自 行设计），如果登录失败，则使用某种方式在页面中进行提示。 为了达到更好的练习效果，老师已经提前准备好了一个后端服务工程，你可以直接启动这个工程的服 务，并向它发起请求，此服务将会向你响应一些结果。

【说明】 关于这个后端服务工程： 你需要找老师获取此工程的jar包文件 你至少需要在计算机中安装JDK才可以启动此工程的服务 此工程的服务默认占用 18080 端口，如端口被占用，将无法启动此服务 如果端口被占用，你可以通过 netstat -ano |findstr 18080 找出占用端口的进程的id， 并通过 taskkill /f /t /im 进程id 来终止进程 你可以使用 java -jar 工程jar包文件 命令启动此服务 例如，把工程jar包文件放在D盘，并且当前位置也在D盘，直接执行命令即可：

java -jar vue-project-server-0.0.1.jar      

git上面     

控制台输入java -jar 拖入jar包

 出现以下代码：检查输入语法或没有配置java的环境变量

 出现端口被占用：

 

使用以下指令 查看tcp 18080对应的pid在任务管理器找到对应pid右键结束服务。