vue-cli安裝和vs code 的相關(guān)配置

Loong_T 發(fā)布于2019-08-23 14:46 / 3383人閱讀

摘要：在本文之前，先給大家講一下接下來需要安裝的東西和他們之間的聯(lián)系。的安裝一安裝的官網(wǎng)下載的安裝包。在或中執(zhí)行命令。以上，就是和的安裝與配置

在本文之前，先給大家講一下接下來需要安裝的東西和他們之間的聯(lián)系。

node: node是js服務(wù)執(zhí)行的環(huán)境，通常我們使用node實(shí)現(xiàn)前端的工程化。前端工程化有很多工具可以實(shí)現(xiàn)，比如webpack、glup等，他們都是基礎(chǔ)node進(jìn)行開發(fā)的。

webpack: webpack是一個前端工程化的工具，我們使用webpack進(jìn)行Vue項(xiàng)目的模塊化管理。

Vue: Vue是一個前端框架，就像以前學(xué)習(xí)的Juquery框架一樣，但是原理和實(shí)現(xiàn)和Jquery不同。

Vue-cli: Vue-cli是一個腳手架，，能讓你非常容易地構(gòu)建項(xiàng)目，包含了 Webpack，Browserify，甚至 no build system。

Vue的安裝 一、安裝 node.js

node.js的官網(wǎng)下載node的安裝包。

安裝完成之后打開終端查看node的版本

如果已經(jīng)安裝過的但是版本過低，請使用后 npm install -g n 來升級node

二、安裝Vue-cli

輸入命令行：npm install vue-cli -g //加 -g 是安裝到全局

安裝完成之后，輸入 vue -V 查看Vue的版本

初始化一個Vue-cli項(xiàng)目

輸入命令： vue init webpack first

輸入命令： cd first 進(jìn)入first項(xiàng)目下面

輸入命令: npm install 來安裝項(xiàng)目所需要的模塊

安裝完成時候，輸入命令： npm run dev 運(yùn)行項(xiàng)目

打開瀏覽器輸入: localhost:8080 查看項(xiàng)目

項(xiàng)目文件配置介紹

1.config：這個文件夾下面是這個項(xiàng)目的配置文件  
2.node_modules：項(xiàng)目的依賴模塊，也是我們前面用命令 npm install 安裝的內(nèi)容
3.src/componets：放vue文件的地方  
4.src/router：放項(xiàng)目路由的地方。vue-router主要用于不同頁面之間的路由跳轉(zhuǎn)    
   5.app.vue：項(xiàng)目的根文件，所有的componets下面的 .vue 文件都會渲染到app.vue里面
6.main.js：項(xiàng)目的入口文件

vs code 的安裝 一、下載安裝包

進(jìn)入vs code的官網(wǎng)進(jìn)行安裝包的下載并安裝。安裝很簡單，只需要一直點(diǎn)擊下一步就好。

安裝完成之后打開vs code

二、安裝Vue的插件

打開擴(kuò)展視圖

安裝vetur

1) 能夠?qū)崿F(xiàn)在 .vue 文件中：語法錯誤檢查，包括 CSS/SCSS/LESS/Javascript/TypeScript
2) 語法高亮，包html/jade/pug css/sass/scss/less/stylus js/ts
3) emmet支持 
4) 代碼自動補(bǔ)全（目前還是初級階段），包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript

安裝Auto Close Tag

1) 在開始標(biāo)記的結(jié)束括號中鍵入時自動添加結(jié)束標(biāo)記
2)插入關(guān)閉標(biāo)記后，光標(biāo)位于開始和結(jié)束標(biāo)記之間
3)設(shè)置不會自動關(guān)閉的標(biāo)記列表
4)自動關(guān)閉自動關(guān)閉標(biāo)簽
5)支持自動關(guān)閉標(biāo)記為Sublime Text 3
6)使用鍵盤快捷鍵或命令選項(xiàng)板手動添加關(guān)閉標(biāo)記

安裝Auto Rename Tag

重命名一個HTML / XML標(biāo)記時，會自動重命名配對的HTML / XML標(biāo)記

安裝VS Color Picker

1)鍵入顏色值或?qū)⒉迦敕栆苿拥筋伾祪?nèi)后，將自動啟動選擇器。
2)VS Color Picker在Command Palette（Ctrl + Shift + P或Cmd + Shift + P）中執(zhí)行命令。
3)綁定命令的鍵extension.vs-color-picker。

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