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

一、全局安装cli （官网：https://cli.vuejs.org/zh/guide/）,这里的版本是： 2.9.6

npm install --global vue-cli

注：升级vue-cli -> 卸载后重装, 卸载：  npm uninstall vue-cli -g  

二、使用脚手架创建项目

#推荐
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'),
    }
  },

Node Sass to Dart Sass

 

```sh
# 先卸载
npm uninstall node-sass
# 再安装
npm install sass -S -D
```

 

修改配置为文件`build/utils.js`

...
return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less', {
            javascriptEnabled: true
        }),
        sass: generateLoaders('sass', {
            indentedSyntax: true,
            implementation: require("sass"), // to use Dart Sass
            data: `$baseUrl: "${process.env.NODE_ENV === 'production' ? '/admin/static/' : '/static/'}";@import "@/assets/css/_variables.sass";@import "@/assets/css/_mixins.sass";`
        }),
        scss: generateLoaders('sass', {
            implementation: require("sass") // to use Dart Sass
        }),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    }

 

 

关闭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

 配置静态文件目录

直接将html文件放到static文件夹本地起的服务无法访问到，因此另配置一个文件夹专门放置这些文件

.../build/webpack.dev.conf.js

new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
    },
    { // 添加这一项
        from: path.resolve(__dirname, '../v2beta'), 
        to: 'beta', // 新起的文件夹
        ignore: ['.*']
    }
    ])

同理配置：.../build/webpack.prod.conf.js

 

 问题：

一、

 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')
  }
}
... ...