使用vs Code從0開始搭建一個vue項目(手把手教會你,包會)

一、準備工作:
  //提前安裝node.js
  下載地址https://nodejs.org/zh-cn/,然後一步一步傻瓜式安裝即可;
  在console控制檯使用node -v,  npm -v, 如果正常顯示版本, 就是安裝成功。


  
  //全局安裝vue-cli, 已經安裝了, 就跳過這一步;
  npm install -g vue-cli


  
  //解決npm安裝慢的問題
  npm install –registry=https://registry.npm.taobao.org
  (使用npm config list 可以查看安裝是否成功)
  

二、準備完畢, 現在進入正題:

以下操作, 都是在vs code的Terminal裏面執行的。
1.在本地磁盤創建一個自己的項目, 我的項目叫做vue-demo
 進入你打算存放代碼的文件目錄(我存放在E:\front-workspace\vue):

 

然後執行命令:

vue init webpack vue-demo

然後回車

生成項目名爲vue-demo的模板, 然後回車(不支持包含大寫的項目名稱)。


2.在安裝時會詢問下面的事項, 根據需要選擇Y/n:

先放個圖, 鎮樓, 下面詳細闡述:


 

1)Project name (vue-demo);項目名稱(vue-demo)。(直接回車)
 2)Project description  (A Vue.js project);項目描述(一個vue.js項目)。(直接回車)
 3)Author ;作者。(這裏我要裝逼一哈, 署名Ferdinand, 畢竟這個代表是Ferdinand寫的, 然後回車)
 4)Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
  直接回車

 5)Install vue-router? (Y/n);安裝的路由?(Y/ n)。(可安可不安,以後也可以再安,根據需求選擇)
  比如我就選擇n, 回車
 6)Use ESLint to lint your code? (Y/n);使用ESlint語法?(Y/  n)。(使用ESLint語法,就要做好心理準備,除非你非常懂ESLint語法,要不就會處處報錯,我就被逼瘋過,建議n)
 7)Setup unit tests with Karma + Mocha? (Y/n);設置單元測試?(Y / N)。(選N)
 8)Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的測試?(Y / N)。(選N)
 9)Should we run `npm install` for you after the project has been created? (recommended)  
 一般選擇npm這一個

 

操作完成, 會看到這樣的界面:

3.cd vue-demo
進入剛纔創建的項目

4.npm install
初始化安裝依賴

5.npm run dev
執行完成之後, 在瀏覽器打開http://localhost:8080,則可以看到歡迎頁了。代表vue項目創建成功。

6.其他
如何在我們自己的服務器上訪問呢?
此時需要執行(前面有個點):
· npm run build
這樣會生成靜態文件,在根目錄的dist裏,裏面有個index.html,這是服務器訪問的路徑指定到這裏就可以訪問我們自己的項目了。
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章