成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Loong_T / 3391人閱讀

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

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

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

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

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

Vue-cli: Vue-cli是一個腳手架，，能讓你非常容易地構(gòu)建項目，包含了 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項目

輸入命令： vue init webpack first

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

輸入命令: npm install 來安裝項目所需要的模塊

安裝完成時候，輸入命令： npm run dev 運行項目

打開瀏覽器輸入: localhost:8080 查看項目

項目文件配置介紹

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

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

進(jìn)入vs code的官網(wǎng)進(jì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) 代碼自動補全（目前還是初級階段），包括 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)使用鍵盤快捷鍵或命令選項板手動添加關(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 的安裝與配置

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101103.html

相關(guān)文章

  • 用VS Code開發(fā)Vue應(yīng)用

    摘要：這是為什么呢因為我們雖然引入了，但是還沒有對做設(shè)置，我們在項目的根目錄下創(chuàng)建一個文件，然后在其中加入再次執(zhí)行，現(xiàn)在我們看到已經(jīng)能夠起作用了。摘要： 0錯誤0警告應(yīng)該是每個程序員最基本的要求。 原文：用vscode開發(fā)vue應(yīng)用 作者：張京 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 現(xiàn)在用VSCode開發(fā)Vue.js應(yīng)用幾乎已經(jīng)是前端的標(biāo)配了，但很多時候我們看到的代碼混亂不堪，作為一...

    zhaofeihao 評論0 收藏0

  • 基于vue+mint-ui的mobile-h5的項目說明

    摘要：把打包的目錄修改成生產(chǎn)環(huán)境需要的目錄。是域名的配置只要統(tǒng)一配置一項即可，方便。旨在增強團(tuán)隊開發(fā)協(xié)作提高代碼質(zhì)量和打造開發(fā)基石的編碼規(guī)范，以下規(guī)范是團(tuán)隊基本約定的內(nèi)容，必須嚴(yán)格遵循。 Vue作為前端三大框架之一，其已經(jīng)悄然成為主流，學(xué)會用vue相關(guān)技術(shù)來開發(fā)項目會相當(dāng)輕松。 對于還沒學(xué)習(xí)或者還沒用過vue的初學(xué)者，基礎(chǔ)知識這里不作詳解，推薦先去相關(guān)官網(wǎng)，學(xué)習(xí)一下vue相關(guān)的基礎(chǔ)知識。 a...

    vboy1010 評論0 收藏0

  • 架構(gòu)師之路

    摘要：因為用戶不用在第一次進(jìn)入應(yīng)用時下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數(shù)利用和來編寫更易維護(hù)的代碼高階函數(shù)可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...

    NikoManiac 評論0 收藏0

  • 搭建自己的前端自動化測試腳手架（一）

    摘要：還可以自動完成單元測試的配置，工具選型為準(zhǔn)備出發(fā)有了以上的初步了解，我們就可以準(zhǔn)備著手搭建我們自己的測試環(huán)境了，讓我們短暫休息一下，下一章見下一篇搭建自己的前端自動化測試腳手架二 搭建自己的前端自動化測試腳手架（一） LancerComet at 17:55, 2016.07.17.歡迎轉(zhuǎn)載，轉(zhuǎn)載時還請保留作者署名。 隨著前端項目規(guī)模的日益膨脹，自動化測試越來越受到廣大前端與測試朋友關(guān)...

    luffyZh 評論0 收藏0

  • vue-cli “從入門到放棄”

    摘要：主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測試在如今前端技術(shù)飛速發(fā)展的時代，和作為前端框架已經(jīng)呈現(xiàn)出了三國鼎立的局面。 主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測試 在如今前端技術(shù)飛速發(fā)展的時代，angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國鼎立的局面。作為國人若你不知道 vue，小生表示可以理解，如果作為中國的前端猿不知道 vue，...

    DrizzleX 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<