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

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

1、安裝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

2、建立項目

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)