Vue學習筆記-nodejs+vue-cli4+webpack按裝配置+項目創建

一  使用環境: windows 7 64位操作系統

二  Vue學習-nodejs按裝配置,Node.js 就是運行在服務端的 JavaScript。

1. 去nodejs的官網下載  https://nodejs.org/en/download/ ,直接點 windows installer

2. 選擇按裝路徑后(我的按裝路徑 D:\nodejs ),直接下一步,這樣 npm 命令就可以用了, node -v 來測試是否成功安裝

 按裝是此處不勾選

3. 配置npm在安裝全局模塊時的路徑和緩存cache的路徑(不配置默認會將模塊安裝在C:\Users\Administrator\AppData\Roaming路徑下的npm和npm_cache中)

3.1 在node.js安裝目錄下新建兩個文件夾 node_global 和 node_cache

3.2 然后在cmd命令下執行如下兩個命令,注意按裝的路徑：

• npm config set prefix "D:\nodejs\node_global"

• npm config set cache "D:\nodejs\node_cache"

3.3 配置環境變量 :

• “環境變量” -> “用戶變量”：編輯Administrator的用戶變量里的 PATH，找到變量值里面的npm的路徑（“C:\Users\Administrator\AppData\Roaming\npm”）改為：“D:\nodejs\node_global”，如下：

• “環境變量” -> “系統變量”：新建一個變量名為 “NODE_PATH”， 值為“D:\nodejs\node_global\node_modules”

3.4 Npm配置淘寶鏡像,提升下載速度(以后按裝就會從淘寶鏡像中按裝):

• npm config set registry https://registry.npm.taobao.org 

3.5 修改完成后查看配置

方式一： npm config list 

 方式二 : 找到路徑 C:\Users\Administrator 下的 .npmrc 文件,以記事本方式打開查看.

3.5 查看淘寶鏡像站 : npm config get registry

3.6 測試查看vue模塊信息: npm info vue

 

3.7 升級全局npm到配置的全局目錄文件中(D:\nodejs\node_global,之前為空文件,升級后就有npm文件): npm install npm -g

 

 

4.常用命令:

• npm是node提供的一個包管理工具,通過npm去安裝依賴包,就不用在頁面上使用script標簽引入了.

• npm -g  全局按裝,任何項目都可以用.

• npm -d  局部按裝,開發環境按裝,不會打包到生產中.

• npm -s  生產環境按裝(默認)

• npm config list  查看基本配置 

• npm config list -l  查看所有配置

• npm config get prefix 獲取全局安裝的默認目錄

• npm config set prefix “directory”  設置全局安裝的默認目錄

• npm uninstall vue-cli -g  卸載vue之前版本

三  Vue學習-vue-cli+webpack按裝配置.

 1.按裝 vue.cli 腳手架 (vue-cli工具是內置了模板包括 webpack 和 webpack-simple): npm install -g @vue/cli

 

 2.查看 vue.cli 腳手架版本 : vue -V  (大V)

 

四  Vue學習-新建vue前端項目(圖型化界面)

 1.啟動圖型化界面(先進入自已要創建項目的路徑,我的路徑F:\CMCT\A01CMCT\study\frontend): vue ui

 

 2.點擊創建(cmd不能關)

 3.點擊在此創建新項目(輸入項目名,只能是英文的,git隨便輸入,其它默認)

 4.下一步,進入模板選擇(第一次用手動配置)

 5.下一步,選擇插件功能(先按5項,后面用到再按裝)

 6.下一步,選擇標准配置文件

 7.點擊創建項目,保存面版設置(以后創建就可以直接選,不用再配置)

 8.等待創建

 9.進入左邊的任務點serve進行編譯,編譯完后點右邊的啟動app,項目創建成功.

 

 10.啟動后成功

 

五  Vue學習-vue-cli腳手架學習

1. 項目目錄說明

 

2. 用vscode打開項目

3. 運行項目,打開終端運行命令 : npm run serve

 

 4. 修改設置,運行后自動打開瀏覽器運行,在根目錄下新建文件 vue.config.js 在里面加上, ctrl+c 停止運行,重新啟動才生效.

module.exports = {

    devServer: {

      //配置端口

      port: 8888,

      //配置自動打開瀏覽器

      open: true

    }

}

六  Vue學習-Element-ui 的基本使用

1. 打開cmd窗口運行 vue ui 打開圖弄化界面,點擊插件,添加插件

2. 輸入 vue-cli-plugin-element

3. 配置,選擇第二行項,按需導入,默認會導致項目體積非常大.

4. 配置依賴 axios 庫

六  Vue學習-eslint報錯設置 錯誤:potentially fixable with the `--fix` option.

1.打開 eslintrc.js 文件,在最后加入如下代碼

  rules: {

    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

    // 左括號前沒有空格報錯

    'space-before-function-paren': 0,

    //在格式化的時候不加分號

    'semi':false,

    // 將雙引號轉成單引號

    'singleQuote':true

  }

 2.eslint 其它常見報錯

• 文件末尾存在空行(eol-last)：Too many blank lines at the end of file.Max of 0 allowed

• 缺少分號(‘semi’: [‘error’,’always’]) :Missing semicolon

• 函數關鍵字后面缺少空格 :Missing space before function parentheses

• 字符串沒有使用單引號(’quotes’: [1, ’single’]) ：String must use singlequote

• 縮進錯誤 ： Expected indentation of 2 spaces but found 4

• 沒有使用全等(eqeqeq) : Expected ’ === ’ and instaed saw ‘==’

• 導入組件卻沒有使用 : ‘seller’ is defined but never used

• new了一個對象卻沒有賦值給某個常量(可以在該實例前添加此代碼/eslint-disable

• no-new/忽略ESLint的檢查): Do not user’new’ for side effects

• 超過一行空白行(no-multiple-empty-lines):More than 1 blank line not allowed

• 注釋符 // 后面縮進錯誤(lines-around-comment): Expected space or tab after
• ‘//’ in comment

• 模塊導入沒有放在頂部：Import in body of module; reorder to top

• 前面缺少空格：Missing space before

• 已定義但是沒有使用：‘scope’ is defined but never used 

3.eslintrc.js配置

module.exports = {
    //此項是用來告訴eslint找當前配置文件不能往父級查找
    root: true, 
    //此項是用來指定eslint解析器的，解析器必須符合規則，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析
    parser: 'babel-eslint',
    //此項是用來指定javaScript語言類型和風格，sourceType用來指定js導入的方式，默認是script，此處設置為module，指某塊導入方式
    parserOptions: {
        sourceType: 'module'
    },
    //此項指定環境的全局變量，下面的配置指定為瀏覽器環境
    env: {
        browser: true,
        node:true
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    // 此項是用來配置標准的js風格，就是說寫代碼的時候要規范的寫，如果你使用vs-code我覺得應該可以避免出錯
    extends: 'standard',
    // required to lint *.vue files
    // 此項是用來提供插件的，插件名稱省略了eslint-plugin-，下面這個配置是用來規范html的
    plugins: [
        'html'
    ],
    // add your custom rules here
    // 下面這些rules是用來設置從插件來的規范代碼的規則，使用必須去掉前綴eslint-plugin-
    // 主要有如下的設置規則，可以設置字符串也可以設置數字，兩者效果一致
    // "off" -> 0 關閉規則
    // "warn" -> 1 開啟警告規則
    //"error" -> 2 開啟錯誤規則
    // 了解了上面這些，下面這些代碼相信也看的明白了
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // js語句結尾必須使用分號
    'semi': ['off', 'always'],
    // 三等號
    'eqeqeq': 0,
    // 強制在注釋中 // 或 /* 使用一致的空格
    'spaced-comment': 0,
    // 關鍵字后面使用一致的空格
    'keyword-spacing': 0,
    // 強制在 function的左括號之前使用一致的空格
    'space-before-function-paren': 0,
    // 引號類型
    "quotes": [0, "single"],
    // 禁止出現未使用過的變量
    'no-unused-vars': 0,
    // 要求或禁止末尾逗號
    'comma-dangle': 0,
    // 嚴格的檢查縮進問題
    "indent": 0,
    //引入模塊沒有放入頂部
    "import/first": 0,
    //前面缺少空格，Missing space before
    "arrow-spacing": 0,
    //后面沒有空位，There should be no space after this paren
    "space-in-parens": 0,
    //已定義但是沒有使用，'scope' is defined but never used
    "vue/no-unused-vars": 0
  }
} 

4.直接在代碼文件中定義

1. 禁用 ESLint：

/* eslint-disable */
var a = 100;
console.log(a);  
/* eslint-enable */

 2.禁用一條規則：

/*eslint-disable no-console */
var a = 100;
console.log(a);
/*eslint-enable no-console */

 3.調整規則：

/* eslint no-console:0 */
var a = 100;
console.log(a);
 

在初始化項目時選擇是否使用ESLint管理代碼(選擇Y則默認開啟) 
Use ESLint to lint your code? (Y/n)y