從無到有實現搭建vue+ElementUI+less+ES6的開發環境並進行簡單的開發的項目

項目簡介：該項目是基於平常計算宿舍水電煤氣費的需求寫的，旨在從無到有實現搭建vue+ElementUI+less+ES6的開發環境並進行簡單的開發，使用webpack進行代碼的編譯、壓縮和打包，並疏通了該項目如何放到服務器上運行的全過程。

項目環境搭建
1、vue的安裝和使用
1.安裝node
2.全局安裝vue-cli，用npm install -g vue-cli命令
3.用webpack初始化項目,在須要放置項目的路徑下用vue init webpack BillingSystem（項目名）命令

2、element的安裝和使用
4.安裝element-ui,用npm i element-ui -S命令
5.引入element-ui,在main.js寫入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);便可引入

3、less的安裝和使用
6.安裝cnpm，用npm install -g cnpm --registry=https://registry.npm.taobao.org命令
7.安裝less，用cnpm install less less-loader --save命令
8.在vue文件style中加上lang="less"的屬性，便可使用

4、項目運行
1.安裝cnpm，用npm install -g cnpm --registry=https://registry.npm.taobao.org命令
2.安裝依賴，用cnpm install命令
3.項目運行，用npm run dev命令
4.訪問http://localhost:8080

5、項目部署到Express服務器上
1.編譯項目，用npm run build命令，生成dist文件夾
2.全局安裝express-generator，用npm install express-generator -g命令
3.建立一個express項目，在須要放置項目的路徑下用express BillingSystemBuild（項目名）命令
4.進入BillingSystemBuild目錄，安裝項目依賴，用npm install命令
5.把dist目錄複製到express項目的public文件夾下,把dist裏的static文件夾剪切到public文件夾下
6.運行npm start，啓動服務器
7.訪問http://localhost:3000/dist

6、項目部署Tomcat服務器上
1.編譯項目，用npm run build命令，生成dist文件夾
2.將dist文件夾放在tomcat安裝路徑下的webapps文件夾裏
3.新增環境變量中的系統變量，變量名爲JAVA_HOME，變量值爲jdk的路徑
4.把dist目錄複製到webapps文件夾下,把dist裏的static文件夾剪切到webapps文件夾下
5.運行Tomcat的bin/startup.bat
6.訪問http://localhost:3000/dist

 

項目地址：https://github.com/LuoYiHao/billing-system