一、安裝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

