使用Vue CLI构建Vue.js项目

偏执的太偏执、 2022-05-21 04:26 180阅读 0赞

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

![clipboard.png][]

安装完成以后增加目录如下：

![clipboard.png][]

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标签

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'

[clipboard.png]: /images/20220521/3371fab8f8b6471fb9f459dd60d69eec.png