1. 程式人生 > >關於vue構建項目的一些指令

關於vue構建項目的一些指令

str 國內 source ebp 目的 官網下載 。。 提示 啟動項

第一步:

brew install nodejs(MAC機子下) Windows直接官網下載對應版本node.js

第二步:

獲取nodejs模塊安裝目錄訪問權限(Windows系統忽略)
sudo chmod -R 777 /usr/local/lib/node_modules/

第三步:

npm install -g cnpm --registry= https://registry.npm.taobao.org(安裝淘寶鏡像/或者使用自己公司代理)

第四步:

安裝webpack
cnpm install webpack -g(全局安裝打包機)

第五步:

安裝vue腳手架
npm install vue-cli -g

第六步:

在硬盤上找一個文件夾放工程用的,在終端中進入該目錄
Mac
cd 目錄路徑
根據模板創建項目
vue init webpack-simple 項目名字 <註意不能用中文!!!>
或者創建 vue1.0 的項目(可忽略因為現在基本是2.0猜想後面是隨著叠代升級)
vue init webpack-simple#1.0 項目名字 <註意不能用中文!!!>

第八步:

安裝項目依賴
一定要從官方倉庫安裝,npm 服務器在國外所以這一步安裝速度會很慢。
npm install
(不要從國內鏡像cnpm安裝,會導致後面缺了很多依賴庫,其實這個還是按照實際項目來一般也是可以的。)


cnpm install
安裝 vue 路由模塊 vue-router 和網絡請求模塊 vue-resource
cnpm install vue-router vue-resource --save(安裝模塊一般是中間空格隔開,)
啟動項目
npm run dev/cnpm run dev

註意安裝模塊依賴:

cnpm install 模塊名 --save-dev(關於環境的,表現為npm run dev 啟動不了)
cnpm install 模塊名 --save(關於項目的,比如main.js,表現為npm run dev 成功之後控制臺報錯)

註意:npm update vue-cli更新腳手架的版本命令和 npm update -g 更新npm版本(主要是防止低版本有時候構建項目會報錯的解決方法一般也有提示)

構建好的項目骨架一般最重要的就是開發部分src下的目錄,組件基本放這裏面或者自己取文件夾名字也是可以的。

記住:

App.vue // 頁面入口文件
main.js // 程序入口文件,加載各種公共組件
index.html // 入口頁面

router下面的index.js是配置路由信息的。(單頁面的title也可以這裏配置

關於webpack的就自行官網API。。。謝謝!

關於vue構建項目的一些指令