*** 不要使用 import 去引入項目,因為不是傳統的項目結構 這樣打不開,直接使用open 打開文件夾即可。
一、在IDEA中配置vue插件
點擊File-->Settings-->Plugins-->搜索vue.js插件進行安裝,下面的圖中我已經安裝好了
二、搭建node.js環境
安裝node.js 可以去官網下載:安裝過程就很簡單,直接下一步就行
測試是否安裝成功:要使用管理員方式打開命令行cmd
輸入:
輸入 node -v 如果出現版本號,則說明安裝成功,npm包管理器是集成在node中的,所以,直接
輸入 npm -v
就會顯示npm版本信息
三、安裝cnpm(注意都是管理員方式運行)
由於有些npm有些資源被屏蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗,
所以還需要安裝npm的國內鏡像----cnpm
執行命令前先需要在命名行中,cd 到項目的根目錄后再執行命令
(如果是已存在項目,CD到package.json文件所在的目錄,基本都在項目的根目錄里。 因為npm要通過package.json文件內容進行項目依賴下載)
在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org
然后等待安裝,安裝完成之后,我們就可以用cnpm代替npm來安裝
依賴包了。
四、安裝vue-cli腳手架構建工具(注意都是管理員方式運行)
在命令行中運行命令 cnpm install -g vue-cli
然后等待安裝完成,通過以上三步,我們的環境和工具都准備好了,接下來就開始使用
vue-cli來構建項目
五、構建運行項目 (會在目錄中生成一個VUE結構的項目項目中包含VUE所需要的依賴文件,已有項目省略此步)
1.我這里是已經有項目了,需要在命名行中,cd 到項目目錄中去
然后需要輸入命令:vue init webpack frontend
(這里命令的意思是初始化一個項目,項目名稱是frontend,其中webpack是構建工具,
也就是整個項目時基於webpack的)
運行命令初始化的時候會讓用戶輸入幾個基本的選項,如項目名稱、描述、作者等信息,可以直接回車默認就可以了。
六、安裝項目依賴資源
在項目的根目錄下面會有一個package.json的文件
這里列出了項目需要安裝的依賴資源,
首先需要cd到項目目錄中去,然后輸入 cnpm install 等待安裝,安裝中會出現警告信息,有的會出現棧溢出等錯誤,我就是在這里遇到了,一般
第一次安裝沒事,如果安裝過的,可以卸載了在重新安裝
七、運行項目
點擊edit configurations配置,添加一個npm
然后就可以在IDEA中運行了。
使用命令行啟動和停止項目
啟動 --- npm run dev
使用命令行打包項目
----npm run build