項目說明:
######新建項目
(如果是git中已經存在的項目,直接拉取,本地要有node跟webpack,然后cmd窗口中切換到項目目錄,輸入npm install或者cnpm install回車安裝項目依賴
安裝完成后,再輸入npm run dev啟動項目,啟動完成后項目自動在瀏覽器中打開,表示項目啟動成功,默認端口8080:)
)
#項目安裝
node安裝
http://www.cnblogs.com/starof/p/5194716.html
https://nodejs.org/en/download/
安裝好后
npm install webpack -g
http://blog.csdn.net/ansu2009/article/details/53261410
npm install -g vue-cli
首先,我們在終端中把當前目錄定位到你準備存放項目的地方。如準備放在E:\vue這個目錄下面,那么先通過cmd命令進入這個目錄,命令如下:
cd vue
進入到目錄之后,我們按照下面的代碼輸入,新建一個自己的vue項目demo01
vue init webpack demo01
cd demo01
npm install
npm run dev
#項目目錄結構介紹
index.html首頁入口文件,你可以添加一些meta信息或同統計代碼。
static靜態資源目錄,如圖片、字體等。目前項目中放置的是js公共方法(comm文件夾中comm.js)、
PamarsConst.js請求公共參數,以及一些插件(plugins)
src這里是我們要開發的目錄,基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件:
assets:放置一些圖片,如logo等。
components:目錄里面放置組件文件。
* page:放置所涉及的頁面跳轉vue文件,之后項目中所增加的新頁面都放在這里
* router:路由配置文件。每增加一個新頁面就添加一項路由配置
store:數據管理文件,暫時不用
App.vue:項目入口文件。
main.js:項目的核心文件。
config配置目錄,包括端口號等。我們初學可以使用默認的。
dist最終發布的代碼存放位置。? 項目開發完后,cmd調出命令面板,輸入npm run build后自動生成的文件
#項目開發中需要注意的事項
1.所有頁面中都需要引入的js或css文件,可以在index.html中引入,常規寫法,其他的只需要在個別頁面中引入的,vue文件中import引入
2.頁面引入的圖片或者js、css文件路徑要寫相對路徑
3.需要添加路由跳轉的地方添加標簽
4.路由配置:首先在router文件夾下的index文件內引入改模板,例如import userManage from '../page/user-manage'
userManage名稱要跟后臺存的名稱一致
然后在新增頁面在/home下的children里面配置,Login路由是登錄頁路由,path: '/'表示項目啟動后的默認顯示頁面
5.單個.vue文件中,script標簽內寫相應方法,style標簽內可以寫頁面樣式
6.如果用webstorm開發,在WebStorm中添加Vue.js單文件組件的高亮及語法支持,參考http://blog.csdn.net/Dcatfly/article/details/53123318
#項目啟動
以上選項都配置好后,每次開發前都需要先啟動項目,cmd命令面板中切換到項目所在目錄adminsys輸入命令行npm run dev然后
按回車鍵,項目啟動后自動在瀏覽器中打開當前項目,默認端口http://localhost:8080/#/home
#項目斷點調試
vue-cli采用的是webpack進行構建的,所以如果要進行斷點調試的話,
請設置devtool為source-map。具體做法是:到/build目錄下的webpack.dev.config.js搜索devtool,將其設置為source-map
完成配置后,跑node服務npm run dev,然后就可以在chrome瀏覽器中進入開發者模式。搜索具體的vue組件進行斷點調試。
---------------------------------------------------------------------------------------------------------
# adminsys
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
```
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).