vue创建项目,使用element-ui,使用scss,编译ES6,使用axios,

Vue项目搭建与打包指南

最新推荐文章于 2024-06-05 09:37:42 发布

原创最新推荐文章于 2024-06-05 09:37:42 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用Vue-CLI全局安装脚手架，创建基于Webpack的Vue项目，并配置Element-UI、Axios等常用库。同时，文章还提供了解决打包后静态资源路径错误及Element-UI图标不显示问题的方法。

如果未安装脚手架,请先全局安装,如若安装请忽略

npm install --global vue-cli

创建一个基于webpack的新项目(myProject)

vue init webpack myProject

切换到项目目录,我这里直接是cd myProject

npm run dev运行成功

安装element-ui,更多请查看官网https://element.faas.ele.me/#/zh-CN/component/installation

npm i element-ui -S

下载后mian.js的配置:

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

安装axios(类似于ajax)更多请查看官网https://www.kancloud.cn/yunye/axios/234845

npm install axios

安装scss,

cnpm install node-sass --save-dev

cnpm install sass-loader --save-dev

提示：使用cnpm安装，当前本人安装的sass-loader最新版本为8.0.1，需要降低版本，本人降低版本为7.3.1，否则会报错（此方法不需要另外配置其他文件）

安装ES6编译器

npm install babel-polyfill --save-dev

在main.js中引入 import 'babel-polyfill'

打包问题

不修改配置的情况下打包会出现两种问题

1.打包完成后会出现css,js引入地址不对,这时候需要修改config文件下的index.js,如下:

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

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',


    assetsPublicPath: './',//此处是我修改后的,可以解决打包后引入静态资源的问题

    /**
     * Source Maps
     */

    productionSourceMap: false,//此处本身是true,是否生成map文件


    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

2.打包后你或许会遇到element-ui的图标不显示,这时候需要修build文件下的utils.js,如下

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'    //此处是我新增,可以解决图标不显示问题
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }