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

1、全局安裝cli （官網：https://cli.vuejs.org/zh/guide/）,這裏的版本是： 2.9.6

npm install --global vue-cli

注：升級vue-cli -> 卸載後重裝, 卸載：  npm uninstall vue-cli -g  

2、使用腳手架建立項目

#推薦
vue init webpack [project-name]


vue init webpack-simple [project-name]

#選項

? Project name [項目名]
? Project description [項目描述]
? Author [做者]
? Vue build standalone [standalone 打包的是 /node_modules/vue/dist/vue.js | runtime 打包的是 /node_modules/vue/dist/vue.common.js]
? Install vue-router? [是否使用vue-router]
? Use ESLint to lint your code? Yes [是否啓用eslint檢測規則]
? Pick an ESLint preset Standard 
? Set up unit tests  [是否使用unit測試]
? Setup e2e tests with Nightwatch? [是否使用E2E測試]
? Should we run `npm install` for you after the project
has been created? (recommended) [是否開始npm安裝依賴]

自動修復eslint規範代碼

npm run lint -- --fix

注：原命令在package.json中scripts下的： "lint": "eslint --ext .js,.vue src" ，直接修改成"lint": "eslint --fix --ext .js,.vue src",方便後續使用

修改.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

 

引入iview組件庫

npm install iview --save

修改配置：

通常狀況下，經過webpack+vuecli默認打包的css、js等資源，路徑都是絕對的。但當部署到帶有文件夾的項目中，這種絕對路徑就會出現問題，由於把配置的static文件夾當成了根路徑，那麼要解決這種問題，就得引用相對路徑。

config->index.js

.....

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', //改成相對路徑 或 在子域名下如：/baidu/

....

背景圖片url問題

build->utils.js

... ...
 // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../', // 加這個
      })
... ...

配置jade、pug、sass、less ...

#安裝支持pug依賴
npm install pug pug-loader pug-filters -D

#安裝支持jade依賴
npm install jade jade-loader -D

#安裝支持sass依賴
npm install sass sass-loader node-sass -D

#安裝支持less依賴
cnpm i less less-loader -D

#安裝vuex
npm install --save vuex

 build->webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json', '.sass', '.less'], // 加這
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

關閉sourceMap

默認vue-cli打包以後js中，會自動生成一些map文件

... .../config/index.js

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/cdss-single-disease/', // 相對路徑 

    /**
     * Source Maps
     */

    productionSourceMap: false, // 關閉source maps

 

 問題：

1、

 ERROR  Failed to compile with 1 errors                              13:55:02

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

Module build failed:

// 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/data-admin/node_modules/_iview@3.1.3@iview/src/styles/color/bezierEasing.less (line 110, column 0)

 @ ./src/assets/css/theme.less 4:14-268 13:3-17:5 14:22-276
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.3@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

解決：在.../build/utils.js中，開啓less的javascript選項便可

// https://vue-loader.vuejs.org/en/configurations/extract-css.html
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less', {javascriptEnabled: true}), // 加這裏
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    }

 抽離第三方依賴庫

在../build/webpack.base.conf.js中添加

module.exports = {
    externals: { // 外部js分離
        "@antv/g6": 'window.G6',
    },
    ...  ...  
}

將g6.js放在.../static/js/下

在html入口文件中引入 

<script src="./static/js/g6.js"></script>

從新啓動項目，代碼中正常引用便可，這時候引入的就是放在靜態文件中的js

import G6 from '@antv/g6';

添加全局sass變量、mixins...

在../build/utils.js 下

... ... 
return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true,
        //向全部 Sass 樣式傳入共享的全局變量
        data: `@import "@/assets/css/_mixins.sass";`}),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}
... ...