Vue項目的搭建以及開發前的配置

一、安裝前的准備工作

• 安裝node.js
• 安裝webpack（ npm install webpack -g ）
• 安裝vue （npm install -g vue-cli ）
• 查看vue版本 （ vue -V ）
• 創建vue項目 （ vue init webpack vuedemo ）

含義：項目名稱

項目簡介

項目的作者

是否安裝Vue-router（是）

是否進行語法檢測（是）

是否下載測試代碼（否）

最后一個也是 no

• 進入安裝目錄 cd vuedemo
• 運行項目；npm run dev

二、把Vue項目的默認的#去除

在router目錄下的index.js下進行配置，添加以下配置

mode: 'history',

三、解決移動端點擊延遲300毫秒事件

在package.json文件中找到dependencies 對象，在此對象后面添加一個組件 "fastclick": "^1.0.6",
或者使用npm install fastclick --save 在終端上進行下載安裝fastclick

Fastclick 的配置（在main.ja中進行配置）

// 引入fastclick

import  fastClick from 'fastclick'

// 引入公共樣式

import './assets/styles/reset.css'

// 1像素邊框yangs

import './assets/styles/border.css'

Vue.config.productionTip = false

// 把 fastClick 事件綁定在 body上

fastClick.attach(document.body)

 

四、常用到的語法檢測配置（eslintsc.js）

找到 .eslintrc.js中的rules對象，在這個對象中進行配置

rules: {

  // 配置強制有分號（；)

  // 'semi': ['error','always'],

  // 去除空格報錯

  'indent': 0,

  // 文件末尾強制換行

  'eol-last': 0

}

五、配置別名（webpack.base.conf.js）

找到bulid目錄下的webpack.base.conf.js下的resolve 對象添加別名對象

resolve: {

  extensions: ['.js', '.vue', '.json'],

  alias: {

    'vue$': 'vue/dist/vue.esm.js',

    '@': resolve('src'),

    'styles': resolve('src/assets/styles'),

    'common': resolve('src/common'),

  }

},

六、手動校驗代碼格式

關閉代碼校驗，在bulid目錄下的webpack.base.conf.js文件下注釋掉

 module: {
    rules: [
   /*   {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      }, */

 

 

在package.json修改這行代碼，添加 --fix

"lint": "eslint --fix --ext .js,.vue src"

使用終端 npm run lint 進行代碼格式化