jeecms v9 vue環境搭建


 

 

一、安裝NODEJS運行環境

前往nodejs官網下載nodejs,https://nodejs.org/en/ ,建議下載最新穩定版的,下載后安裝即可,下載選擇類似如下


安裝完畢之后,在cmd中輸入node -v查看是否已經安裝成功

如果有版本號顯示,則代表安裝成功!!!

接下來我們嘗試輸入npm -v

nodejs自帶npm,所以我們不需要額外安裝就可以了。

 

二、環境變量設置
接下來我們需要配置npm的全局模塊的存放路徑以及cache的路徑,例如我希望將以上兩個文件夾放在NodeJS的主目錄下,便在NodeJs下建立“node_global”及“node_cache”兩個文件夾。我們就在cmd中鍵入兩行命令:

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

下面這一步非常關鍵,我們需要設置系統變量。進入我的電腦→屬性→高級→環境變量。在系統變量下新建“NODE_PATH”,輸入“D:\Program Files\nodejs\node_global\node_modules”

二、安裝cnpm

cmd 后敲入下面命令

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

需要詳細了解cnpm的朋友請前往官網https://npm.taobao.org/

之后輸入cnpm -v

接下來我們就可以用cnpm代替npm了

若是提示沒有版本,則需要將cnpm命令所在文件夾加入環境變量的path中

例如我本地的是在

D:\Program Files\nodejs\node_global下,則將此路徑追加到path中

 

三、安裝安裝vue

cnpm install -g @vue/cli

 

vue  -V

 

四、接下來是創建項目框架

進入源碼目錄:

C:\Users\Administrator>f:

 

F:\>cd F:\jeecms\jeecmsv9AuthorizedVersion\jeecmsv9Vue\jeecmsVue

 

F:\jeecms\jeecmsv9AuthorizedVersion\jeecmsv9Vue\jeecmsVue>cnpm install

 

 

如果想放到指定的目錄下,先進入這個目錄再執行創建項目的命令

 

E:\test\vue init webpack myProjectName          //創建一個基於"webpack"的項目,后面是項目名 

 

依次按照提示輸入,項目名、項目描述、項目作者等等,

 

然后一路回車  看到最后這個項目就創建好了。

 

 

五、運行測試

cnpm run dev

cnpm run build

 

一般流覽器會自動跳轉出界面http://localhost:8080/,也可以手動打開流覽器器輸 入地址。

 

npm run build 打包 

 

 

4.4 后台頁面發布 
后台源碼的開發文件不可直接運行在瀏覽器中,需要通過命令打包將源碼生成為靜態文件 
1.使用命令行工具進入 工程目錄 
  
2. 項目工程中如果沒有node_modules文件夾,則執行 
npm install (推薦使用cnpm  install,http://npm.taobao.org/  加快依賴下載速度) 
  如果有則忽略此步驟 
3.執行命令npm run build 

出現building for production 則成功執行,等待命令完成 完成后會出現下圖 
  
出現上圖,說明打包編譯完成,在項目中會有一個dist文件夾 
  
dist文件夾中有兩個文件 
  
4、將index.html改名為index.do 后,將index.do和static文件夾放到ROOT下的/jeeadmin/jeecms文件夾下,eclipse下放到/WebContent/jeeadmin/jeecms下 jeecms


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM