使用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'

使用Vue CLI构建Vue.js项目

猜你喜欢