vue學習(1) vue-cli 項目搭建

vue學習(1)  vue-cli 項目搭建

1、windows環境

1. 下載node.js安裝包

　　官網：https://nodejs.org/en/download/

　　選擇LTS下載

2. 安裝

　　下載完成後點擊安裝包安裝到本身指定的文件夾

　　windows + r 打開cmd，在命令行中輸入node -v，若是安裝成功就能夠看到當前node的版本

　　輸入npm -v，能夠看到相應的npm的版本

3. 安裝vue-cli

　　npm install -g cli

4. 建立cli項目

　　首先cd進入到你想要建立項目的文件夾目錄下

　　vue init webpack my-vue

　　根據提示信息完成建立，項目名、項目描述、做者名、build、路由、ESLint、測試等，ESLint後面幾個推薦選擇no

5. 運行

　　建立完成後執行 

　　cd my-vue 

　　npm run dev 便可看到提示

　　Your application is running here: http://www.javashuo.com/tag/http://localhost:8080，打開該連接便可看到你的項目

 

2、mac環境

1. 下載node.js安裝包

　　官網：https://nodejs.org/en/download/

　　選擇LTS下載

2. 安裝

　　下載完成後點擊安裝包安裝到本身指定的文件夾

　　打開終端，在命令行中輸入node -v，若是安裝成功就能夠看到當前node的版本

　　輸入npm -v，能夠看到相應的npm的版本 （若安裝失敗能夠從新下載安裝包進行安裝）

3. 安裝webpack

　　npm install webpack -g

　　會提示安裝webpack-cli，根據提示安裝便可

　　若由於權限緣由安裝失敗，在安裝命令行以前加入sudo,根據提示輸入密碼便可

4. 安裝vue-cli

　　npm install cli -g 

5. 建立cli項目

　　首先cd進入到你想要建立項目的文件夾目錄下

　　vue init webpack my-vue

　　根據提示信息完成建立，項目名、項目描述、做者名、build、路由、ESLint、測試等，ESLint後面幾個推薦選擇no

6. 運行

　　建立完成後執行 

　　cd my-vue 

　　npm run dev

　　便可看到提示 Your application is running here: http://www.javashuo.com/tag/http://localhost:8080

　　打開該連接便可看到你的項目

 

 

完.