Vue創(chuàng)建項(xiàng)目步驟總結(jié)

Vue創(chuàng)建項(xiàng)目總結(jié)

一、如何創(chuàng)建一個(gè)VueDemo項(xiàng)目

  1. 為了更好的管理使用vue框架創(chuàng)建項(xiàng)目，需要在全局中安裝vue-cli

    • npm install --global vue-cli //工具將被安裝到當(dāng)前使用的node版本的mode_modules下

    • vue-V //查看是否安裝成功,如果安裝成功會(huì)出現(xiàn)當(dāng)前vue-cli的版本

    • vue-cli是什么？（腳手架工具）

      • vue-cli是vue命令行工具，需要安裝它才能直接通過vue命令來操作其他的操作
      • 如：vue init <template-name> <project-name>
      • vue init webpack dirname

    • vue-cli的作用：

      • 目錄結(jié)構(gòu)

      • 本地測試

      • 單元測試

      • 熱加載

      • 代碼部署

        ?

  2. 使用github上提供的模板快速創(chuàng)建vue項(xiàng)目

    • github上提供了5種不同結(jié)構(gòu)的單頁面模板，根據(jù)情況選擇使用

    • 可以使用vue list 查看模板的名稱

    • vue init webpack helloworld //vue init為固定的開始，后面的webpack為要?jiǎng)?chuàng)建的模板，helloworld為項(xiàng)目文件夾名稱

    • 此時(shí)會(huì)下載template
Project name                     //項(xiàng)目名
Project description              //項(xiàng)目描述
Author                           //作者
Vue build                        //構(gòu)建項(xiàng)目
   1.運(yùn)行+編譯（官方推薦）        //選擇第一項(xiàng)
   2.僅運(yùn)行時(shí)
   
Install vue-router?(Y/n)        //如果需要路由就Y，不需要就n    //Y
Use ESLint to lint your code? (Y/n)         //是否使用ESLint管理代碼   //n
Setup unit tests with Karma + Mocha? (Y/n)  //是否安裝單元測試，我選擇n
Setup e2e tests with Nightwatch(Y/n)?       //是否安裝e2e測試 ，我選擇n

此時(shí)模板已經(jīng)下載到電腦了，你會(huì)在cmd中看見如下信息
To get started：           //叫你馬上開始的意思
   cd helloworld          //進(jìn)入項(xiàng)目文件夾
   npm install            //使用npm 安裝        如果安裝了cnpm,也可以使用cnpm,
   npm run dev            //在瀏覽器運(yùn)行
   
   這一步必須要在npm run dev  之前執(zhí)行
cnpm install --production      //安裝生產(chǎn)依賴，即package.json文件里面的dependencies
   即：
   "dependencies": {
       "vue": "^2.3.3",
       "vue-router": "^2.6.0"
   },
  1. 在安裝vue-cli的時(shí)候出現(xiàn)的警告
npm-install-vue-cli-g.png

出現(xiàn)如圖警告的原因：

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2(node_modules\vue-cli\node_modules\fsevents): //跳過可選的依賴

原因是我的系統(tǒng)不支持fsevents包，fsevents包需要在MaxOSX的環(huán)境下才能使用

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os" : "darwin","arch" : "any"} (current: {"os":"win32","arch":"x64"})

“os”代表系統(tǒng)類型，darwin是蘋果系統(tǒng)包含的一部分

“arch”代碼系統(tǒng)的架構(gòu)，我當(dāng)前使用的是win32位，基于x64處理器

二、目錄結(jié)構(gòu)分析

vue-dir.png
  • 如下的目錄有些是臨時(shí)加上去的，如果圖片上沒有可以忽略（一級(jí)目錄）
|-- build                            // 項(xiàng)目構(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                           // 項(xiàng)目開發(fā)環(huán)境配置
|   |-- dev.env.js                   // 開發(fā)環(huán)境變量
|   |-- index.js                     // 項(xiàng)目一些配置變量
|   |-- prod.env.js                  // 生產(chǎn)環(huán)境變量
|   |-- test.env.js                  // 測試環(huán)境變量
|-- src                              // 源碼目錄
|   |-- components                     // vue公共組件
|   |-- store                          // vuex的狀態(tài)管理
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js                        // 程序入口文件，加載各種公共組件
|-- static                           // 靜態(tài)文件，比如一些圖片，json數(shù)據(jù)等
|   |-- data                           // 群聊分析得到的數(shù)據(jù)用于數(shù)據(jù)可視化
|-- .babelrc                         // ES6語法編譯配置,里面有一些插件，這些插件的作用是代碼的轉(zhuǎn)換
|-- .editorconfig                    // 編譯器的配置,定義代碼格式
|-- .eslintignore                    //忽略語法檢查的目錄文件
|-- .eslintrc.js                     //編譯規(guī)則配置文件，規(guī)則定制文件，規(guī)則編譯不過的時(shí)候可以在這里配置為0
|-- .gitignore                       // git上傳需要忽略的文件格式,
|-- favicon.ico                      // link圖標(biāo)
|--.postcssrc.js
|-- index.html                       // 入口頁面
|-- package.json                     // 項(xiàng)目基本信息如：可以配置script腳本  ^上箭頭代表可以安裝當(dāng)前版本及以上的版本
|-- README.md                        // 項(xiàng)目說明

三、使用ESLint管理代碼

  • 出現(xiàn)錯(cuò)誤:semi

    • semi Missing semicolon //缺少分號(hào)
    • missing ['m?s??] 缺少
    • semicolon[sem?'k??l?n] 分號(hào)
    • 解決問題：在項(xiàng)目的根目錄下找.eslintrc.js文件，打開后在rules屬性中設(shè)置規(guī)則
    'rules' : {
    'arrow-parens': 0,                    //允許less箭頭功能
    'generator-star-spacing': 0,          
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
      'semi' : ['error', 'always']         //設(shè)置這行規(guī)則（沒有分號(hào)就報(bào)錯(cuò)）
}

    ?

    ?

  • 格式化代碼都出現(xiàn)的錯(cuò)誤：indent

    • 連接：eslint.org/docs/rules/indent
    • 解決問題：在項(xiàng)目的根目錄下找.eslintrc.js文件，打開后在rules屬性中設(shè)置規(guī)則
    'rules' : {
  'semi' : ['error', 'always'],  // 設(shè)置分號(hào)結(jié)尾
  'indent' : 0        //設(shè)置這行規(guī)則（空格還是縮進(jìn)）
}

  • 錯(cuò)誤：no-multiple-empty-lines

    • 在script標(biāo)簽中刪除所有的空行
    //不正確的
<script>
  
</script>

//正確的
<script>
</script>
  • 錯(cuò)誤：no-new
/* eslint-disable no-new */     //跳過校驗(yàn) no-new 規(guī)則
new Vue({
  el : "#body",
  components : {App}    //使用一個(gè)組件
});

四、package.json文件

1.package.json
{
  "name": "vue1",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {     //生產(chǎn)依賴
    "vue": "^2.3.3",
    "vue-router": "^2.6.0"
  },
  "devDependencies": {      //開發(fā)依賴
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "cssnano": "^3.10.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^12.1.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
2.dependencies與devDependencies
  • dependencies生產(chǎn)時(shí)需要的依賴
  • devDependencies開發(fā)時(shí)需要的依賴
  • 運(yùn)行npm install命令，會(huì)自動(dòng)安裝dependencies和devDependencies字段中的模塊
3.script 字段
  • script字段是用來指定npm相關(guān)命令的縮寫的
  • 如在命令行中運(yùn)行npm run dev就相當(dāng)于在執(zhí)行node build/dev-server.js 
"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • vue-cli 是一個(gè)官方發(fā)布 vue.js 項(xiàng)目腳手架，使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目，Git...
    阿爾法乀閱讀 9,636評(píng)論 0贊 4
  • 聽著溪水的流淌，看著花兒的飄舞。沉浸在春光里，無法自拔。遠(yuǎn)處的亭子下，是你安靜讀書的身影。 不想打破這份寧靜，不想...
    小時(shí)公子閱讀 508評(píng)論 6贊 10
  • 今天第一次用簡書，寫東西的習(xí)慣是老早就有，只是一直無奈沒有找到一個(gè)很好的平臺(tái)，能夠完全滿足自己寫東西的欲望和訴求。...
    萬類霜天競自由閱讀 218評(píng)論 0贊 1
  • 【今日話題】你四月份的目標(biāo)是什么？ 1、讀完三本書，《書都不會(huì)讀，你還想成功》、《who moved my che...
    米里人生閱讀 225評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容