VUE+Element-ui+Springboot环境配置

前端：搭建vscode+vue+element环境

一、vue

1.安装最新的node.js
2.安装vue-cli脚手架构建工具
   在命令行中运行命令 

npm install -g vue-cli 

3.进入项目文件夹存放目录，创建项目(vue init webpack firstVue),其中firstVue是项目文件夹的名称，选项除了vue-router全部选No。

cd D:ProjectssoftwareEproject
vue init webpack firstVue  //firstVue是项目文件夹的名称，选项除了vue-router全部选No。

4.cd到项目文件夹（firstVue文件夹），然后运行命令 npm install ，安装依赖

cd D:ProjectssoftwareEprojectfirstVue
npm install

5.如果npm安装依赖失败，则返回最初的系统用户目录，安装cnpm（国内的)。若成功，则直接进入步骤7。

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

6.cd到项目文件夹（firstVue文件夹），然后运行命令 cnpm install ，安装依赖

cd D:ProjectssoftwareEprojectfirstVue
cnpm install

7.运行项目(进入项目文件夹)：cnpm run dev， 浏览器打开http://localhost:8080，查看项目的运行结果

cd D:ProjectssoftwareEprojectfirstVue
cnpm run dev 

【备注】1.这里是使用 CLI 构建出来的 Vue 项目。

               2.cnpm和npm用一个即可，尽量不要混用。

               3.start 即是执行 npm run dev 命令（查看package.json中的scripts可知）

（参考：https://blog.csdn.net/mao834099514/article/details/79138484）

 

二、vscode
1.安装vscode
2.在vscode中添加插件vetur

 

三、集成element
1.安装elenment-ui 

    命令行进入到项目根目录输入cnpm i element-ui -S，安装完成之后，package.json文件会增加element-ui依赖（dependencies中）

cnpm i element-ui -S

2.用完整引入方式在main.js中写入以下内容：

 import ElementUI from 'element-ui' //引入js

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

 Vue.use(ElementUI)

3. 运行项目：安装依赖 cnpm install，运行 cnpm run dev，浏览器打开http://localhost:8080

cd D:ProjectssoftwareEprojectfirstVue
cnpm install
cnpm run dev

后端：