使用Vue CLI構建Vue.js項目

使用Vue CLI構建Vue.js項目

1.安裝Vue CLI, 當前最新版本：@3.0.0-rc.3。注意安裝前先卸載Vue CLI 2

npm install -g @vue/cli

2.在Vue CLI 3中若是要使用vue init命令，還需安裝vue/cli-init

npm install -g @vue/cli-init

3.初始化項目

vue init webpack my-vue-project

安裝完成之後增長目錄以下：

4.安裝less和less-loader

npm install less less-loader --save-dev

配置less路徑：build---webpack.base.conf.js添加

{
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
}

5.修改.eslintrc.js

'eol-last': 0,//不檢測新文件末尾是否有空行
'space-before-function-paren': 0 //function 左括號前是否要加一個空格

6.修改webpack.base.conf.js alias:

alias: {
      '@': resolve('src'),
      'src': resolve('src'),
      'common': resolve('src/common'),
    }

7.移動端加meta標籤

<meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
    minimum-scale=1.0, user-scalable=no">

8.安裝babel-runtime（Babel 轉碼器 能夠將ES6 轉爲ES5 ）

npm install --save babel-runtime

babel-runtime is a package that contains a polyfill and many other things that Babel can reference. You'd install it in your app with npm install babel-runtime
transform-runtime is a Babel plugin to process your source code and inject import foo from "babel-runtime" statements so that babel-runtime is actually used. You'd also install this with npm install babel-plugin-transform-runtime.

How to use it
Assuming you have a running Babel environment:

Install babel-plugin-transform-runtime (as a devDependency), which
transforms your code to remove the helpers and uses the ones in
babel-runtime. You need to add it to the plugins array of your Babel
configuration Install babel-runtime (as a dependency), which is the
actual library babel-plugin-transform-runtime assumes you are going to
have in your dependencies, it will be used by your transpiled code at
runtime. You do not need to require it anywhere in your code. Minimal
snippet npm run build compiles the lib folder into dist npm start
starts the dist folder (which depends on babel-runtime)

package.json

{
  "scripts": {
    "build": "babel lib --out-dir=dist",
    "start": "node dist"
  },
  "dependencies": {
    "babel-runtime": "^6.9.2"
  },
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-plugin-transform-runtime": "^6.9.0"
  },
  "babel": {
    "plugins": [
      "transform-runtime"
    ]
  }
}

9.安裝fastclick 解決移動端300ms延遲問題

npm install --save fastclick

在main.js中：

import fastclick from 'fastclick'

fastclick.attach(document.body)

10.安裝babel-polyfill

Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，好比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼。

舉例來講，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。若是想讓這個方法運行，必須使用babel-polyfill，爲當前環境提供一個墊片。
即解決：ie9和一些低版本的高級瀏覽器對es6新語法不支持的問題

npm install --save-dev babel-polyfill

在main.js最上引入：

import 'babel-polyfill'