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地圖
    }
}