VUE開發(fā)--環(huán)境配置(一)

一、開發(fā)工具

Visual Studio Code

二宣吱、環(huán)境搭建

  1. vue推薦開發(fā)環(huán)境:
    Node.js: javascript運行環(huán)境(runtime),不同系統(tǒng)直接運行各種編程語言
    npm: Nodejs下的包管理器窃这。由于國內(nèi)使用npm會很慢,這里推薦使用淘寶NPM鏡像(http://npm.taobao.org/
    $ npm install -g cnpm –registry=https://registry.npm.taobao.org
    webpack: 它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準備,比如資源的合并和打包凌节。
    vue-cli: 用戶生成Vue工程模板
  2. 安裝node.js
    官網(wǎng):http://nodejs.cn/
    從node.js官網(wǎng)下載并安裝node钦听,安裝過程很簡單,一路“下一步”就可以了倍奢。
    安裝完成之后朴上,打開命令行工具,輸入 node -v卒煞,如果出現(xiàn)相應(yīng)的版本號痪宰,則說明安裝成功。
node.js測試
  1. npm包管理器畔裕,是集成在node中的衣撬,所以,直接輸入 npm -v扮饶,顯示出npm的版本信息具练。


    npm
查看全局包位置: 
C:\Users\Administrator>npm root -g
查看包的依賴關(guān)系 :
C:\Users\Administrator>npm view npm dependencies
查看npm基本配置命令:
C:\Users\Administrator>npm config list
  1. 安裝cnpm(可選)
    由于有些npm有些資源被屏蔽或者是國外資源的原因,經(jīng)常會導致用npm安裝依賴包的時候失敗甜无,所有我還需要npm的國內(nèi)鏡像—cnpm扛点。
    在命令行中輸入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然后等待哥遮,安裝完成如下。
安裝cnpm

完成之后陵究,我們就可以用cnpm代替npm來安裝依賴包了眠饮。

  1. 安裝vue-cli腳手架構(gòu)建工具

在命令行中運行命令 npm install -g vue-cli ,然后等待安裝完成铜邮。

# 全局安裝vue-cli
C:\Users\Administrator>npm install -g vue-cli
或:
C:\Users\Administrator>npm install --global vue-cli

  1. 用vue-cli構(gòu)建項目
    要創(chuàng)建項目仪召,首先我們要選定目錄,然后再命令行中把目錄轉(zhuǎn)到選定的目錄松蒜。
# 建一個基于 webpack 模板的新項目
Webpack為構(gòu)建扔茅,vue-project為項目名
D:\>vue init webpack vue-project
用vue-cli構(gòu)建項目

如果出現(xiàn)亂碼請改變命令行窗口編碼格式:
D:>chcp 65001

解釋一下這個命令,這個命令的意思是初始化一個項目牍鞠,其中webpack是構(gòu)建工具咖摹,也就是整個項目是基于webpack的评姨。其中vue-project是整個項目文件夾的名稱难述,這個文件夾會自動生成在你指定的目錄中:

D:\>cd vue-project
D:\vue-project>
查看目錄結(jié)構(gòu)
  1. 安裝項目所需的依賴
    要安裝依賴包,首先cd到項目文件夾(vue-project文件夾)吐句,然后運行命令 cnpm install 胁后,等待安裝。


    安裝項目所需的依賴

安裝完成之后嗦枢,會在我們的項目目錄vue-project文件夾中多出一個node_modules文件夾攀芯,這里邊就是我們項目需要的依賴包資源。


vue-project文件夾
  1. 運行項目
    在項目目錄中文虏,運行命令 npm run dev 侣诺,會用熱加載的方式運行我們的應(yīng)用,熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果氧秘。


    運行項目

這里簡單介紹下 npm run dev 命令年鸳,其中的“run”對應(yīng)的是package.json文件中,scripts字段中的dev丸相,也就是 node build/dev-server.js命令的一個快捷方式搔确。

項目運行成功后,瀏覽器會自動打開localhost:8080(如果瀏覽器沒有自動打開灭忠,可以手動輸入)膳算。運行成功后,會看到如下所示的界面弛作。


結(jié)果展現(xiàn)

三涕蜂、安裝配置vscode

  1. VSCode設(shè)置中文語言環(huán)境
    使用快捷鍵【Ctrl+Shift+P】
    在彈出的搜索框中輸入【configure language】,然后選擇搜索出來的【Configure Display Language】,如下圖:


    設(shè)置語言環(huán)境

    設(shè)置語言環(huán)境

    安裝簡體中文
  2. Visual Studio Code編輯器在Windows上安裝比較簡單映琳,直接setup.exe机隙。安裝好后首次啟動配置插件瘦真,插件配置必須聯(lián)網(wǎng),從網(wǎng)上下載黍瞧。如下圖點擊左側(cè)擴展:


    擴展
  3. 配置
    文件->首選項->設(shè)置

{
    "workbench.iconTheme": "vscode-icons",
    "editor.fontSize": 20,
    "editor.renderIndentGuides": false,
    "files.autoSave": "afterDelay",
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        },
        {
            "extensionName": ".min.css",
            "format": "compressed",
            "savePath": "/css"
        }
    ],
    "liveSassCompile.settings.excludeList": [
       "**/node_modules/**",
       ".vscode/**"
    ],
    "liveSassCompile.settings.generateMap": true,
    "easysass.formats": [
        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "./css/",
    "background.customImages": [
        "file:///D://222.png"
    ],
    "background.useDefault": false,
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "102%",
        "height": "100%",
        "background-position": "0%",
        "background-repeat": "no-repeat",
        "opacity": 0.3
    },
    "editor.quickSuggestions": {
        "strings": true
    },
    "cssrem.rootFontSize": 12,
    "cssrem.autoRemovePrefixZero": false,
    "cssrem.fixedDigits": 3,
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "vue",
            "html"
        ]
    },
    "workbench.colorTheme": "Dark-Dracula",
    "vetur.format.defaultFormatter.html": "js-beautify-html"
}

二诸尽、Vue-cli 項目目錄解析

|-- build                            // 項目構(gòu)建(webpack)相關(guān)代碼
|   |-- build.js                     // 生產(chǎn)環(huán)境構(gòu)建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關(guān)
|   |-- dev-server.js                // 構(gòu)建本地服務(wù)器
|   |-- utils.js                     // 構(gòu)建工具相關(guān)
|   |-- webpack.base.conf.js         // webpack基礎(chǔ)配置
|   |-- webpack.dev.conf.js          // webpack開發(fā)環(huán)境配置
|   |-- webpack.prod.conf.js         // webpack生產(chǎn)環(huán)境配置
|-- config                           // 項目開發(fā)環(huán)境配置
|   |-- dev.env.js                   // 開發(fā)環(huán)境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產(chǎn)環(huán)境變量
|   |-- test.env.js                  // 測試環(huán)境變量
|-- src                              // 源碼目錄
|   |-- assets                       // 資源目錄 
|   |-- components                   // vue公共組件
|   |-- store                        // vuex的狀態(tài)管理
|   |-- App.vue                      // 頁面入口文件
|   |-- main.js                      // 程序入口文件印颤,加載各種公共組件
|-- static                           // 靜態(tài)文件您机,比如一些圖片,json數(shù)據(jù)等
|   |-- data                         // 數(shù)據(jù)
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳需要忽略的文件格式
|   |-- .postcssrc.js                // 通過JS插件裝換樣式的工具 
|-- README.md                        // 項目說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息

三年局、常見問題

  1. Eslint總是報錯‘[vue/no-parsing-error] Parsing error: x-invalid-end-tag.’
    關(guān)閉eslint的檢查


    Eslint總是報錯

    vetur.validation.template


    解決方法

常見錯誤:

  1. ! chromedriver@2.46.0 install: node install.js
D:\vue-project> npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末际看,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子矢否,更是在濱河造成了極大的恐慌仲闽,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件僵朗,死亡現(xiàn)場離奇詭異赖欣,居然都是意外死亡,警方通過查閱死者的電腦和手機验庙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門顶吮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人粪薛,你說我怎么就攤上這事悴了。” “怎么了违寿?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵湃交,是天一觀的道長。 經(jīng)常有香客問我藤巢,道長搞莺,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任菌瘪,我火速辦了婚禮腮敌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘俏扩。我一直安慰自己糜工,他們只是感情好,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布录淡。 她就那樣靜靜地躺著捌木,像睡著了一般。 火紅的嫁衣襯著肌膚如雪嫉戚。 梳的紋絲不亂的頭發(fā)上刨裆,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天澈圈,我揣著相機與錄音,去河邊找鬼帆啃。 笑死瞬女,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的努潘。 我是一名探鬼主播诽偷,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼疯坤!你這毒婦竟也來了报慕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤压怠,失蹤者是張志新(化名)和其女友劉穎眠冈,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體菌瘫,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡蜗顽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了突梦。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诫舅。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖宫患,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情这弧,我是刑警寧澤娃闲,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站匾浪,受9級特大地震影響皇帮,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蛋辈,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蹂析,春花似錦糯钙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至苗胀,卻和暖如春襟诸,著一層夾襖步出監(jiān)牢的瞬間瓦堵,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工歌亲, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留菇用,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓陷揪,卻偏偏與公主長得像刨疼,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子鹅龄,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容