vue-cli安裝和vs code 的相關配置

在本文以前，先給你們講一下接下來須要安裝的東西和他們之間的聯繫。

1. node: node是js服務執行的環境，一般咱們使用node實現前端的工程化。前端工程化有不少工具能夠實現，好比webpack、glup等，他們都是基礎node進行開發的。
2. webpack: webpack是一個前端工程化的工具，咱們使用webpack進行Vue項目的模塊化管理。
3. Vue: Vue是一個前端框架，就像之前學習的Juquery框架同樣，可是原理和實現和Jquery不一樣。
4. Vue-cli: Vue-cli是一個腳手架，，能讓你很是容易地構建項目，包含了 Webpack，Browserify，甚至 no build system。

Vue的安裝

1、安裝 node.js

1. node.js的官網下載node的安裝包。
2. 安裝完成以後打開終端查看node的版本
   
3. 若是已經安裝過的可是版本太低，請使用後 npm install -g n 來升級node

2、安裝Vue-cli

1. 輸入命令行：npm install vue-cli -g //加 -g 是安裝到全局
2. 安裝完成以後，輸入 vue -V 查看Vue的版本
   

初始化一個Vue-cli項目

1. 輸入命令： vue init webpack first
   
2. 輸入命令： cd first 進入first項目下面
3. 輸入命令: npm install 來安裝項目所須要的模塊
   
4. 安裝完成時候，輸入命令： npm run dev 運行項目
   
5. 打開瀏覽器輸入: localhost:8080 查看項目
   

6. 項目文件配置介紹
   

   1. config：這個文件夾下面是這個項目的配置文件
   2. node_modules：項目的依賴模塊，也是咱們前面用命令 npm install 安裝的內容
   3. src/componets：放vue文件的地方
   4. src/router：放項目路由的地方。vue-router主要用於不一樣頁面之間的路由跳轉
   5. app.vue：項目的根文件，全部的componets下面的 .vue 文件都會渲染到app.vue裏面
   6. main.js：項目的入口文件

vs code 的安裝

1、下載安裝包

1. 進入vs code的官網進行安裝包的下載並安裝。安裝很簡單，只須要一直點擊下一步就好。
   
2. 安裝完成以後打開vs code
   

2、安裝Vue的插件

打開擴展視圖

1. 安裝vetur
   

   1) 可以實如今 .vue 文件中：語法錯誤檢查，包括 CSS/SCSS/LESS/Javascript/TypeScript
   2) 語法高亮，包html/jade/pug css/sass/scss/less/stylus js/ts
   3) emmet支持
   4) 代碼自動補全（目前仍是初級階段），包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript

2. 安裝Auto Close Tag

   1) 在開始標記的結束括號中鍵入時自動添加結束標記
   2)插入關閉標記後，光標位於開始和結束標記之間
   3)設置不會自動關閉的標記列表
   4)自動關閉自動關閉標籤
   5)支持自動關閉標記爲Sublime Text 3
   6)使用鍵盤快捷鍵或命令選項板手動添加關閉標記

3. 安裝Auto Rename Tag

   重命名一個HTML / XML標記時，會自動重命名配對的HTML / XML標記

4. 安裝VS Color Picker

   1)鍵入顏色值或將插入符號移動到顏色值內後，將自動啓動選擇器。
   2)VS Color Picker在Command Palette（Ctrl + Shift + P或Cmd + Shift + P）中執行命令。
   3)綁定命令的鍵extension.vs-color-picker。

以上，就是vue-cli和vs code 的安裝與配置