vue-cli 3.x.x搭建项目及配置

vue-cli 官网：https://cli.vuejs.org/zh/guide/

一、安装cli

若之前安装过2.x.x,需先卸载

npm uninstall vue-cli -g 
# or
yarn global remove vue-cli

Vue CLI 3.0 + 安装改为

npm install -g @vue/cli
# OR
yarn global add @vue/cli

注：安装yarn ：https://yarnpkg.com/zh-Hans/docs/install#mac-stable

二、创建项目

1）图形界面方式

vue ui

2）命令行

vue create [project-name]

如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

启动项目

npm run serve
# OR
yarn serve

 

安装预编译器

#pug
npm i pug pug-plain-loader pug-loader pug-filters -D

#jade
npm install jade jade-loader -D

#安装支持less依赖
npm i less less-loader -D

 

修改默认缩进size：.editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 4 // here
trim_trailing_whitespace = true
insert_final_newline = true

 

 

根目录下创建vue.config.js文件

 

配置sass共享variables

css: {
        loaderOptions: {
            // 给 less-loader 传递选项
            less: {
                javascriptEnabled: true
            },
            // 给 sass-loader 传递选项
            sass: {
                //向所有 Sass 样式传入共享的全局变量
                data: `@import "@/assets/css/_variables.sass";`
            }
        }
    }

 

 

启动报错：

http://eslint.org/docs/rules/  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

  4 | </template>
  5 | 
> 6 | <script>
    | ^
  7 |     export default {
  8 |         name: 'HelloWorld', 9 | data () { src/components/HelloWorld.vue:6:1 <script>

解决方法：https://github.com/vuejs/eslint-plugin-vue/issues/186#issuecomment-329426553

eslint的配置改了，将原来的parser配置移到parserOptions内部即可

The cause is "parser": "babel-eslint", setting. Please move it into "parserOptions".

  {
      "root": true, - "parser": "babel-eslint", + "parserOptions": { + "parser": "babel-eslint" + },

报错

 WARNING  Compiled with 1 warnings                 10:19:22

Module Warning (from ./node_modules/_eslint-loader@2.1.1@eslint-loader/index.js):
error: Parsing error: Unexpected token < at src/App.vue:1:1:
> 1 | <template lang="pug">
    | ^
  2 | .test 123
  3 | </template>
  4 |


1 error found.

vue文件需要使用 vue-eslint-parser 去解析

parserOptions: {
-       parser: 'babel-eslint',
+       parser: 'vue-eslint-parser',
        "sourceType": "module"
    }

 

iview定制主题，引入less报错

98% after emitting CopyPlugin                                                  s
 ERROR  Failed to compile with 1 errors                                  16:07:17

 error  in ./src/assets/css/theme.less

Module build failed (from ./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js):


// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in /Users/linqiang/Documents/workplace/wsdtcp/node_modules/_iview@3.2.2@iview/src/styles/color/bezierEasing.less (line 110, column 0)

 @ ./src/assets/css/theme.less 4:14-253 14:3-18:5 15:22-261
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.217.105:8999/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

在vue.config.js加入

...
css: {
        loaderOptions: {
            // 给 less-loader 传递选项,开启less的javascript选项
            less: {
                javascriptEnabled: true
            }
        }
    }
...

背景图片url路径错误 ，在开发环境正常和打包后background-image: url(...) 找不到图片，

官网处理静态资源：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E5%A4%84%E7%90%86%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90

解决方案：

参考链接：https://www.jb51.net/article/147558.htm

1. 将图片统一放在publilc/images下

2.在vue.config.js中注入sass全局变量$baseUrl，其值取决于运行环境

const baseUrl = process.env.NODE_ENV === 'production' ? '/sub/' : '/';

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `$baseUrl: "${baseUrl}";`
      }
    }
  }
}

3.sass中使用

background-image: url($baseUrl + 'images/logo.png')

网上其他解决方案：以 ~ 开头，其后的任何内容都会作为一个模块请求被解析,但自己应用的时候好像并没有按照模块去解析... 暂且记录下

background-image: url('~/@/assets/images/logo.png')

 

报错

Failed to compile.

./src/assets/css/element-variables.scss (./node_modules/css-loader??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-3-3!./src/assets/css/element-variables.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                    ^
      Media query expression must begin with '('
      in /Users/linqiang/Documents/workplace/cdss-embed-vue/src/assets/css/element-variables.scss (line 2, column 22)

 启动报错

events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TCP.onread (net.js:660:25)
Emitted 'error' event at:
    at emitErrorNT (internal/streams/destroy.js:82:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
    at process._tickCallback (internal/process/next_tick.js:63:19)

 解决方案：尝试网上搜索到的方法：更改本地启动的ip地址为127.0.0.1；修改端口号；重新安装node_modules；都不管用😢,无意中修改了下代理的服务器地址，正常跑起来了

路由懒加载

在vue.config.js中加入，[prefetch详见](https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch)

chainWebpack: config => {
        // 修改prefetch：prefetch空闲加载，deprefetch会在页面加载完成后，利用空闲时间提前加载获取用户未来可能会访问的内容。
        // https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
        config.plugin('prefetch').tap(options => {
            options[0].fileBlacklist = options[0].fileBlacklist || [];
            options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/);
            return options;
        });
    }

路由配置，组件引用时

{
        path: '/home,
        name: 'home',
        component: () => import('./home.vue'),        
}

 

Vue-cli3使用全局变量eslint报错

ESLint 可以通过 .eslintrc 或 package.json 中的 eslintConfig 字段来配置。

例在.eslintrc 配置：

module.exports = {
    globals: {
        google: true // google地图
    }
}