首页 > 技术文章 > VUE+Element-ui+Springboot环境配置

meiqin970126 2019-11-07 15:20 原文

前端:搭建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:\Projects\softwareEproject
vue init webpack firstVue  //firstVue是项目文件夹的名称,选项除了vue-router全部选No。
4.cd到项目文件夹(firstVue文件夹),然后运行命令 npm install ,安装依赖
cd D:\Projects\softwareEproject\firstVue
npm install

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

npm install -g cnpm --registry=http://registry.npm.taobao.org
6.cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install ,安装依赖
cd D:\Projects\softwareEproject\firstVue
cnpm install

7.运行项目(进入项目文件夹):cnpm run dev, 浏览器打开http://localhost:8080,查看项目的运行结果
cd D:\Projects\softwareEproject\firstVue
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:\Projects\softwareEproject\firstVue
cnpm install
cnpm run dev

 

后端:

 

 

推荐阅读