vue 開(kāi)發(fā)工具安裝介紹

npm(node包管理工具)

前端項(xiàng)目框架和模塊的下載管理工具，類(lèi)似后臺(tái)maven工具，安裝node時(shí)自帶npm

1. 安裝node
   node官網(wǎng)下載地址：http://nodejs.cn/download/
   

   node下載

2. 在命令行工具中配置npm淘寶源鏡像
   npm config set registry https://registry.npm.taobao.org
   

   命令行工具運(yùn)行常用npm指令

3. npm常用指令
   npm install xxx [-g] [--save] ->安裝依賴(lài)模塊,-g為全局安裝，--save是否保存到配置文件中
   npm run dev ->本地啟動(dòng)一個(gè)webpack-dev-server服務(wù)器，運(yùn)行項(xiàng)目
   npm run build ->打包前端項(xiàng)目，生成靜態(tài)html、css、js
   npm run test ->運(yùn)行測(cè)試代碼

4. npm配置文件package.json

// 一個(gè)常見(jiàn)的package.json文件
{
  "name": "vue-admin-template",
  "version": "3.6.0",
  "license": "MIT",
  "author": "Pan <panfree23@gmail.com>",
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:report": "npm_config_report=true node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "test": "npm run lint"
  },
  "dependencies": {
    "axios": "0.17.1",
    "element-ui": "2.3.4",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "vue": "2.5.10",
    "vue-router": "3.0.1",
    "vuex": "3.0.1",
    "echarts": "3.8.5"
  },
  "devDependencies": {
    "autoprefixer": "7.2.3",
    "babel-core": "6.26.0",
    "babel-eslint": "8.0.3"
  }
}

VSCode編碼工具安裝及配置

1. 安裝vscode
   vscode官網(wǎng)下載地址：https://code.visualstudio.com/
   
   vscode下載
2. 常用插件下載
   中文：Chinese (Simplified) Language Pack
   代碼校驗(yàn)：eslint
   vue代碼優(yōu)化顯示：vetur
   vue簡(jiǎn)寫(xiě)代碼：vue vscode snippets
   
   插件下載

3. vscode統(tǒng)一配置

   
   
   vscode配置
   
   

   操作步驟為：點(diǎn)擊文件->首選項(xiàng)->設(shè)置->用戶(hù)設(shè)置，將如下json代碼粘貼到用戶(hù)設(shè)置區(qū)

{
    "editor.tabSize": 2,
    "editor.fontSize": 18,
    "workbench.startupEditor": "newUntitledFile",
    "sublimeTextKeymap.promptV3Features": true,
    "explorer.confirmDelete": false,
    "files.exclude": {  
        "**/.git": true,  
        "**/.svn": true,  
        "**/.DS_Store": true,  
        "**/node_modules": true,  
        "**/iOS": true,
        "**/.gitignore":true,  
    },
    "workbench.colorTheme": "Monokai",
    "window.zoomLevel": 0,
    "git.ignoreMissingGitWarning": true,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },{
            "language": "vue",
            "autoFix": true
        }
    ]
}

使用vue-cli腳手架快速搭建vue開(kāi)發(fā)環(huán)境

1. npm install -g vue-cli ->全局安裝vue-cli腳手架
2. vue init webpack vueTest->初始創(chuàng)建vue模板工程
3. 在項(xiàng)目根路徑打開(kāi)命令行，執(zhí)行npm install安裝依賴(lài)，npm start啟動(dòng)項(xiàng)目
   vue-cli快速搭建項(xiàng)目參考網(wǎng)址：http://www.itdecent.cn/p/2769efeaa10a