1. 程式人生 > >自學vue基礎,搭建vue專案,小總結

自學vue基礎,搭建vue專案,小總結

node.js環境(npm包管理器)
vue-cli 腳手架構建工具
cnpm npm的淘寶映象
--save-dev 是你開發時依賴的東西 , --save 是你釋出之後還依賴的東西

 


一、下載安裝node.js

網上免費下載,不熟悉可以下載完成後傻瓜式next安裝
安裝完成後開啟終端dos命令node -v檢查

 


二、部署執行vue專案

一般node.js有自帶的npm最好還是更新一下,終端dos命令npm install
安裝cnpm在命令列中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然後等待,安裝完成
安裝vue-cli腳手架構建工具,在命令列中執行命令 cnpm install -g vue-cli ,然後等待安裝完成。
在命令列中cd/ 回到根目錄,再cd進入到要建專案的目錄。
在命令列中執行命令 vue init webpack firstVue初始化專案。
在命令列中cd firstVue 專案檔案去。
在命令列中執行命令

npm install vue-resource --save


在命令列中執行命令

npm install [email protected] --save


在命令列中執行命令

npm install less less-loader --save


在命令列中執行命令

npm install [email protected] --save


然後執行命令 cnpm install ,等待安裝。
完場上面專案後,專案目錄firstVue資料夾中多出一個node_modules資料夾
安裝完畢後,在main.js中匯入vue-resource
在build/webpack.base.conf.js檔案中,在整個 module.exports 配置物件的末尾增加plugins配置jquery
在src/main.js檔案的頂部加入如下對bootstrap主要檔案的引用

 


三、實現vue多頁面開發

建立建立一個目錄,新建三個檔案:new.html,new.js,new.vue
build\webpack.base.conf.js在module.exports中,找到entry新增多個入口one.js
開啟\build\webpack.dev.conf.js檔案,找到plugins,新增配置
開啟\config\index.js檔案,在build里加入配置
開啟/build/webpack.prod.conf.js檔案,找到plugins,新增配置
寫new.js
寫new.vue
寫new.html