GVKun编程网logo

webpack1.x + ElementUI 初探（webpack ejs）

17

这篇文章主要围绕webpack1.x+ElementUI初探和webpackejs展开，旨在为您提供一份详细的参考资料。我们将全面介绍webpack1.x+ElementUI初探的优缺点，解答webp

这篇文章主要围绕webpack1.x + ElementUI 初探和webpack ejs展开，旨在为您提供一份详细的参考资料。我们将全面介绍webpack1.x + ElementUI 初探的优缺点，解答webpack ejs的相关问题，同时也会为您带来element-ui和npm、webpack、vue-cli搭建Vue项目、elementUI中icon在webpack打包后不显示的问题、elementui的表格正确使用骨架屏vue-elementui-skeleton、nodejs+npm+webpack+vue+ElementUI+vue-route的实用方法。

本文目录一览：

webpack1.x + ElementUI 初探（webpack ejs）

webpack1.x + ElementUI 初探（webpack ejs）

前言

ElementUI 目前版本是1.1，虽然还在1.x阶段，但是组件种类已经很丰富了，用来ElementUI 做管理页面，非常合适。本文介绍在真正开始使用ElementUI 之前的准备工作，适合第一次使用webpack打包工具和想体验 ElementUI 的小白同学。

1. 安装Vue2.0

注意：

  1. 保证npm版本是3.10.x 及以上，想省事的话就重新安装 nodejs 6.x 的版本

  2. 请事先配置国内npm镜像，以免安装失败，配置方法： 修改 ~/.npmrc 文件如下（ Windows用户最好用gitbash进行编辑 ） 

registry=https://registry.npm.taobao.org
chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
phantomjs_cdnurl=https://npm.taobao.org/dist/phantomjs

准备工作做好了之后 进行如下步骤 

npm install vue-cli -g  #安装脚手架 
vue init webpack my-vue #安装 webpack 模板，my-vue 是项目名，自己定义 此命令会提示让你确认设置，一路回车就好了 
cd my-vue #进入工程目录
npm install #安装依赖

vue init 会自动生成 npm 项目，并帮你写好 package.json

通过查看package.json可以查看项目依赖版本 

"dependencies": {
  "vue": "^2.1.0"
},
"devDependencies": {
  "autoprefixer": "^6.4.0",
  "babel-core": "^6.0.0",
  "babel-eslint": "^7.0.0",
  "babel-loader": "^6.0.0",
  "babel-plugin-transform-runtime": "^6.0.0",
  "babel-preset-es2015": "^6.0.0",
  "babel-preset-stage-2": "^6.0.0",
  "babel-register": "^6.0.0",
  "chai": "^3.5.0",
  "chalk": "^1.1.3",
  "chromedriver": "^2.21.2",
  "connect-history-api-fallback": "^1.1.0",
  "cross-spawn": "^4.0.2",
  "css-loader": "^0.25.0",
  "element-ui": "^1.0.7",
  "eslint": "^3.7.1",
  "eslint-config-standard": "^6.1.0",
  "eslint-friendly-formatter": "^2.0.5",
  "eslint-loader": "^1.5.0",
  "eslint-plugin-html": "^1.3.0",
  "eslint-plugin-promise": "^3.4.0",
  "eslint-plugin-standard": "^2.0.1",
  "eventsource-polyfill": "^0.9.6",
  "express": "^4.13.3",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.9.0",
  "function-bind": "^1.0.2",
  "html-webpack-plugin": "^2.8.1",
  "http-proxy-middleware": "^0.17.2",
  "inject-loader": "^2.0.1",
  "isparta-loader": "^2.0.0",
  "json-loader": "^0.5.4",
  "karma": "^1.3.0",
  "karma-coverage": "^1.1.1",
  "karma-mocha": "^1.2.0",
  "karma-phantomjs-launcher": "^1.0.0",
  "karma-sinon-chai": "^1.2.0",
  "karma-sourcemap-loader": "^0.3.7",
  "karma-spec-reporter": "0.0.26",
  "karma-webpack": "^1.7.0",
  "lolex": "^1.4.0",
  "mocha": "^3.1.0",
  "nightwatch": "^0.9.8",
  "node-sass": "^4.0.0",
  "opn": "^4.0.2",
  "ora": "^0.3.0",
  "phantomjs-prebuilt": "^2.1.3",
  "postcss-loader": "^1.2.1",
  "sass-loader": "^4.1.0",
  "selenium-server": "2.53.1",
  "semver": "^5.3.0",
  "shelljs": "^0.7.4",
  "sinon": "^1.17.3",
  "sinon-chai": "^2.8.0",
  "url-loader": "^0.5.7",
  "vue-loader": "^10.0.0",
  "vue-style-loader": "^1.0.0",
  "vue-template-compiler": "^2.1.0",
  "webpack": "^1.13.2",
  "webpack-dev-middleware": "^1.8.3",
  "webpack-hot-middleware": "^2.12.2",
  "webpack-merge": "^0.14.1"
}

注意：

如果你发现你的 webpack 版本是 2.x

那么你之前应该用了 vue init webpack-simple my-vue 命令

本篇文章就不再实用了

你可以使用 vue list 查看每种模板的描述，然后重新安装模板

执行下面的命令，稍等片刻，如果你看到了一个V字LOGO那么Vue2.0就已经准备妥当了。 

npm run dev

2.安装 ElementUI 

npm install element-ui --save-dev

官方网站链接 http://element.eleme.io/#/zh-CN/component/installation

默认主题的样式文件挺大的，压缩后 110K 左右

所以官方文档中推荐了一个按需加载的 babel 插件，在引用指定组件的同时，还能够把组件相应的 css 文件 import 进来

官方文档的示例配置都是基于 webpack2.0 的，webpack1.x 的配置如下 

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime",
    ["component", [
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-default"
      }
    ]]
  ],
  "comments": false
}

CSS 文件增加前缀

比较坑的是，这些组件的 css 的浏览器兼容性并不好，所以需要通过 autoprefixer 加工一下

找到 build/webpack.base.conf 文件

将 vue 下的 postcss项，提到外面，并设置兼容更低的浏览器版本 

...
  postcss: [
    require(''autoprefixer'')({
      browsers: ["Chrome >= 1","Safari >= 1","Firefox >= 1","ie >= 8"] // 粗暴一点
    })
  ],
  vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap })
  }
  ...



找到 build/utils.js 文件的 cssLoaders 方法

给使用到的文件类型 加一个 postcss 加载器，如果没有就不要加 

...
  return {
    css: generateLoaders([''css'',''postcss'']), // 项目中使用到的文件匹配规则 多加一个 postcss 加载器
    less: generateLoaders([''css'', ''less'']),
    sass: generateLoaders([''css'', ''sass'', ''postcss'']),// 项目中如果使用到了 sass 多加一个 postcss 加载器
    scss: generateLoaders([''css'', ''sass'', ''postcss'']),// 项目中如果使用到了 scss 多加一个 postcss 加载器
    stylus: generateLoaders([''css'', ''stylus'']),
    styl: generateLoaders([''css'', ''stylus''])
  }



保存之后，使用命令安装这些加载器，项目初始化时并没有安装，需要手动执行 

npm install postcss-loader --save-dev
npm install sass-loader --save-dev



CSS 文件分离

引入的组件css文件会打包到 js 文件中，并在执行js时动态加载到 <head> 标签内，产生很多内联样式标签<style>

无论是从文件缓存，还是结构洁癖的角度来看，把CSS代码打包到js中，是件很不舒服的事

按理来说这是webpack 的锅，但是可能会影响到初学者对ElementUI的第一印象

我们可以通过修改 webpack 配置把 ElementUI 的 css ( commonCSS )，和自己写的模块的 css ( appCSS ) 分离开，并用外部文件引用的方式加载

还是 build/utils.js 文件的 cssLoaders 方法，做如下修改 

...
if (options.extract) {  // 是否分离文件
  if(options.ExtractPlugin){ // 如果指定了分离插件，就使用插件处理
    return options.ExtractPlugin.extract(''vue-style-loader'', sourceLoader)
  }else{
    return ExtractTextPlugin.extract(''vue-style-loader'', sourceLoader)
  }
} else {
  return [''vue-style-loader'', sourceLoader].join(''!'')
}
...



还是 build/webpack.base.conf.js 文件 

...
let appCSS = new ExtractTextPlugin(''css/app.css''); // vue中的css 会被打包到 app.css 中
...
  vue: {
    loaders: utils.cssLoaders({ extract:true, sourceMap: useCssSourceMap ,ExtractPlugin:appCSS })
  },
  plugins: [
    appCSS, // 设置插件
  ]



修改 build/webpack.dev.conf.js 文件 如下 

...
let commonCSS = new ExtractTextPlugin(''css/common.css''); //将另外引入的css文件打包到common.css中
...
module: {
  loaders: utils.styleLoaders({ extract:true, sourceMap: config.dev.cssSourceMap,ExtractPlugin:commonCSS })
},
...
plugins: [
  commonCSS,  //设置插件
  ...
]

这样一来，资源的分类和打包看起来就合理多了，准备工作做完了，可以开心的写代码了。


作者信息

本文系力谱宿云LeapCloud旗下MaxLeap团队_UX组成员：王诗诗【原创】
MaxLeap技术博客首发：https://blog.maxleap.cn/archives/1243

相关文章
5个提高Node.js应用性能的技巧
前端，想说爱你不容易！
浏览器存储及使用

作者往期佳作
多屏互动——H5中级进阶

无需Flash实现图片裁剪——HTML5中级进阶

欢迎关注微信公众号：MaxLeap_yidongyanfa

element-ui和npm、webpack、vue-cli搭建Vue项目

element-ui和npm、webpack、vue-cli搭建Vue项目

一、element-ui的简单使用

1、安装

1. npm 安装
　　推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
　　npm i element-ui -S

2. CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

 

2、element和Vue的使用示例(NavMenu导航菜单的使用)

1. 导入需要使用的JS文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

 

2. 去element官网找到需要的组件

我们这里简单的展示一下导航菜单，把需要的样式复制到我们的HTML页面(这里我只用一个样式，就只复制那个样式)
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
<el-menu>

 

3. 定制我们的Vue

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>教育网</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .el-menu {
            display: flex; /*弹性盒子/CSS3的一个新特性*/
            align-items: center; /*水平居中*/
            justify-content: center; /*垂直居中*/
        }
    </style>

</head>

<body>
<div id="app">
    <my_header></my_header>
    <router-view></router-view>
</div>

<template id="header">
    <div>
        <!--设置了router=true后，el-menu-item就等于router-link，index就等于to-->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/course">免费课程</el-menu-item>
            <el-menu-item index="3">轻课</el-menu-item>
            <el-menu-item index="4">学位课程</el-menu-item>
            <el-menu-item index="5">智能题库</el-menu-item>
            <el-menu-item index="6">公开课</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    let my_header = {
        // 把菜单导航设置成Vue实例的组件
        template: "#header",
        data() {
            return {
                // 默认选中
                activeIndex: ''/'',
            }
        }
    };

    let url = [
        {
            path: ''/'',
            component: {
                template: `<div><h1>这是首页</h1></div>`
            }
        },
        {
            path: ''/course'',
            component: {
                template: `<div><h1>免费课程页面</h1></div>`
            }
        },

    ];

    let router = new VueRouter({
       routes: url
    });

    const app = new Vue({
        el: "#app",
        router: router,
        components: {
            my_header: my_header
        },
    })
</script>

</body>
</html>
View Code

 

二、Node.js和npm

1、什么是Node.js和npm

Node.js是一个Javascript运行环境(runtime environment)，实质是对Chrome V8引擎进行了封装。
Node.js不是一个 JavaScript 框架，不同于CakePHP、Django、Rails。Node.js 更不是浏览器端的库，不能与 jQuery、ExtJS 相提并论。
Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。

而npm是Node.js的包管理工具。

好吧，类比一下python：
Node.js就是你的python解释器。
npm就等于python解释器的pip，用于管理(安装，卸载)包的工具。

Node.js有它自己的语法，我们这里安装Node.js主要是为了使用它的npm，方便我们搭建Vue项目，至于它的语法，有兴趣的可自行研究。
注意：node.js和python解释器一样，需要自己到官网去下载并安装。

 

2、npm介绍和常用指令

1. npm的安装和更新

下载安装Node.js后自带包管理工具npm。

查看安装版本信息：

　　--  node -v  查看Node.js 版本信息

　　--  npm -v  查看npm版本信息

更新npm到指定版本：

　　--  npm install npm@5.3.0 -g

　　-- npm install npm@latest -g 更新最新的稳定版本

命令参数(S、D、g)：
npm install module_name -S    即    npm install module_name –save    下载到dependencies(生产环境)

npm install module_name -D    即    npm install module_name –save-dev 下载到devDependencies(开发环境)

npm install module_name -g 下载到全局
模块将被下载安装到【全局目录】中。
【全局目录】通过 npm config set prefix "目录路径" 来设置。
比如说，当我们使用了npm install -g express安装了express框架后， 我们就可以在电脑里的某一个文件夹下，打开控制台，直接使用express mvc创建项目，如果不是全局安装的会遇到 “''express'' 不是内部或外部命令，也不是可运行的程序”错误。

npm install module_name 本地安装,将模块下载到当前命令行所在目录(将安装包放在：命令行所在目录/node_modules 下)

 

2. npm 常用操作

之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目，而且要管理版本。
有了npm，我们管理自己的依赖包以及版本更加简单。

到自己项目目录下，进行以下命令：

　　-- npm init -y    输入-y使用默认配置项 生成package.json文件。

　　-- npm i jquery@0.0.0   简写i是install的简写 下载依赖  不写@ 默认最新版本

　　-- npm uninstall jquery  卸载依赖包

　　-- npm update jquery   更新依赖包

　　-- npm list  列出已安装的依赖

　　-- npm install webpack --D 保存为开发环境依赖

　　-- 老版本需要 --save 参数 现在不需要了

我们的项目目录下会生成一个 node_modules 目录，我们用npm下的包会在这个目录下。
我们所有的依赖信息放在package.json文件中，包括我们所有的依赖以及版本。
如果我们删掉 node_modules目录，可以使用 npm i  来下载所有依赖。

 

3. npm 常用配置项

当我们用npm init 的时候用了参数 -y，如果不用-y我们可以进行一些配置。

在我们的package.json文件中有很多配置项

　　-- name  项目名字 中间不能有空格只能用小写

　　-- version  项目版本

　　-- description   项目描述信息

　　-- main  项目的入口文件

　　-- scripts 指定命令的快捷方式 npm run test     test是scripts里的键名 值为具体命令

　　-- author 作者

　　-- license  许可证

　　-- dependencies  生成环境依赖的包以及版本信息

　　-- devDependencies  开发环境的依赖

 

三、webpack3版本

1、webpack是什么

webpack是一个模块打包器
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适
的格式以供浏览器使用。

 

2、安装和配置

webpack是跑在Node.js环境下的，所以确定自己有node环境。

安装方式：
　　-- npm install webpack -g  全局安装(webpack3版本可以直接使用webpack安装)

　　-- webpack  <要打包文件>  <打包后文件>     全局这种方式进行打包

　　-- npm install webpack   在自己的项目下 npm init 后在下载webpack 这就是局部安装

　　-- node_modules/.bin/webpack <要打包文件>  <打包后文件>   项目里要打包文件是入口文件

　　-- 路径太长 太烦 可以自定义命令  在package.json 文件的 scripts下面自定义

 

3、entry 和 output

entry 入口文件  output 出口文件
上面我们自定义命令的时候 命令太长了，而且我们命令太多的时候我们需要每次都自定义多条命令

我们可以把命令写在webpack.config.js文件中
module.export = {
    // 所有的入口文件
    entry: {
         home: ''./main.js'', 
         login: ''./login.js'',
    }, 
    // 出口文件  
    output: {
         filename: ''[name].bundle.js'',
         path: __dirname + ''/dist'',
    }       
}
// backage.json  下的scripts
scripts: {
     "pack": "node_moudles/.bin/webpack --watch"
}

//  运行命令
npm run pack

 

四、webpack4版本(新特性)

1、 在4版本中，webpack不再单独使用，需要webpack-cli

　　-- 全局安装  npm install webpack webpack-cli -g

　　-- 局部安装  npm install webpack webpack-cli -D

 

2、 增加了模式区分 （development, production）

webpack --mode development/production 进行模式切换

development 开发者模式 打包默认不压缩代码

production  生产者模式 上线时使用，压缩代码。 默认是这个模式

 

3、默认入口文件(入口文件需自己创建)是./src/index.js，默认输出文件./dist/main.js

-- 当只有一个入口文件也就是src/index.js时，无需增加webpack.config.js
-- 因此打包后，别的HTML页面只需要引入main.js即可使用

 

4、多入口以及多出口(不是必要的配置项)

// webpack.config.js配置
entry: {
    // 多入口
    a: "./src/js/index.js",
    b: "./src/js/index2.js",
}
output: {
    // 多出口
    path: path.resolve(__dirname, ''dist''),
    filename: ''./js/[name].bundle.js''
}
View Code

 

5、打包

1. 在webpack4中需要手动创建src文件夹，在src文件夹下，新建index.js作为入口文件
2. 打包命令
单独使用webpack打包
    webpack --mode development(开发模式)
    webpack --mode production(生产模式)

 

6、export/import补充

0. 补充
export default 某个变量
import 变量名1 from xx 

1. my.js
let name = ''明仔'';
function func() {
    console.log(123);
}

const age = 18;

export {name, func}

// 每个文件只能有一个export default，且只抛出一个值
export default age


2. index.js
import {name, func} from "./my"

// 导入export默认抛出的变量，并改名为aaggee
import aaggee from "./my"

console.log(name);
console.log(aaggee);
func();

 

五、vue-cli 2版本

1、用vue-cli搭建项目

0. 友情提示
vue-cli自带webpack和vue.js,
当对象的键和值的变量名称相同时，可简写成一个变量，
在vue-cli项目中使用npm下载的包，导入时不需要写路径，直接可以导入，但必须起别名
例如：npm i vue-router
那么：
    在main.js中使用时，只需要直接导入即可
    import VueRouter from ''vue-router''
    // 导入后需要让vue对象使用它
    Vue.use(VueRouter)



vue-cli是官方提供的快速构建这个单页面应用的脚手架。
根据官方文档中的构件流程：前提是已经安装了node.js 否则npm都用不了

1. 使用npm全局安装vue-cli 
    npm install vue-cli -g 

2. 安装完成后在自己的工作空间里输入下面命令
    vue init webpack 项目名称
    输入命令后进入安装阶段，需要用户输入一些信息

3. 切换到我们的项目目录下 
    cd 到项目目录下
    npm run dev --> 启动项目

4. 项目中需要使用一些.vue后缀的文件，需要下载vue.js插件
Setting --> Plugins --> 搜索vue.js并下载 --> 重启pycharm

 

2、目录结构

　　-- build 打包的所有文件

　　-- config 配置文件，执行文件需要的配置信息

　　-- src 资源文件(工作目录) 所有的组件以及所有的图片 都在这个文件夹下

　　-- node_modules  项目的所有依赖包

　　-- static 静态资源

　　-- package.json   依赖包的json文件

   -- index.html 单页面应用

 

3、Vue搭建的单页面项目解耦分析

1. 项目中的index.html就是我们的单页面

2. src/main.js就是我们这个单页面index.html对应的js文件

3. src/App.vue就是我们这个单页面index.html的app作用域的组件， .vue后缀的文件都是组件的配置信息

4. main.js解析
new Vue({
    el: ''#app'',
    components:{App},
    template: ''<App/>''
})

el: ''#app'' 是index.html 的<div id="app"></div>
components是注册组件
<App/> 他就是App.vue，是组件的配置信息
根实例的template就是选择vue根实例要加载的组件，会把index.html里面的内容替换成加载的组件的内容
App.vue是主程序，其他所有的.vue都是放在App.vue中，所以只需要加载App.vue就完全可以把其他的东西加载出来

5. 其他组件就放在src/components里面，后缀使用.vue。src/assets是存放图片的

6. .vue后缀的文件就是我们组件的配置信息

7. 把配置信息命名抛出后，在我们的主组件APP.vue可以导入并使用，也就是说其他组件都是抛出给主组件导入使用的
<template>
  <div id="app">
    <h1>这是单页面应用的大组件App组件</h1>
    <!--子组件-->
    <my_header></my_header>
  </div>
</template>

<script>
// 导入子组件配置信息
import MyHeader from "./components/MyHeader"

export default {
  name: ''APP'',
  // 在这里定义子组件
  components: {
    my_header: MyHeader
  },
  }
</script>

<style>

</style>

8. 如果需要路由vue-router，则使用npm i vue-router下载这个js
   然后在src下面新建一个routers文件夹用于创建vue-router实例，然后抛出，main.js导入后即可使用路由

9. 在vue-cli的项目中，组件component必须解耦，也就是说component组件的配置内容都得写在一个.vue文件中，然后抛出，导入使用
   component单数，代表只有一个组件，component: 组件名(配置信息名)
   components复数，代表有几个组件，components: {组件名1: 配置信息名1, 组件名2: 配置信息名2}，如果组件名和配置信息名一样，
   可以只写一个名字 components:{组件名1, 组件名2}

 

4、vue-cli配置JQuery、bootstrap

1. 下载安装
-- npm install jquery 
-- npm install bootstrap 


2. 修改build/webpack.base.conf.js
注意：vue-cli3版本中如果没有webpack.base.conf.js，那么手动创建一个webpack.base.conf.js
const webpack = require(''webpack'')
// 在module.exports里添加插件
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery",
      // Popper: [''popper.js'', ''default'']
    })
],
//  *******下面是如果手动下载bootstrap用的*******
resolve: {
    extensions: [''.js'', ''.vue'', ''.json''],
    alias: {
      ''vue$'': ''vue/dist/vue.esm.js'',
      ''@'': resolve(''src''),
      // 如果是手动下载的bootstrap需要添加这个配置
      // ''assets'': path.resolve(__dirname, ''../src/assets''),
      // ''jquery'': ''jquery/src/jquery''
    }
  },
View Code 
3. 修改主程序的js文件 main.js
import $ from ''jquery''
import ''bootstrap/dist/css/bootstrap.min.css''
import ''bootstrap/dist/js/bootstrap.min.js''

 

六、vue-cli 3版本

1、下载vue-cli 3.0
-- npm install @vue/cli -g 
-- 报错 npm error  可以运行下面命令(清理缓存)
-- npm cache clean --force && npm cache verify


2、创建项目
-- vue create 项目名称


3、目录结构以及配置文件
-- vue-cli3 目录更加简单
-- 我们手动在项目根目录下创建vue.config.js里面写vue的配置信息


4、vue-cli3 配置jQuery、bootstrap
-- 跟vue-cli2一样的配置，手动创建一个webpack.base.conf.js

 

七、常用命令小结

npm 包管理工具
　　管理项目 npm init -y
　　下载 npm install xxx@0.0.0
　　卸载 npm uninstall xxx
webpack 4
　　下载 npm i webpack webpack-cli
　　默认的入口文件  src/index.js
　　出口文件  dist/main.js
　　打包命令 webpack --mode development/production
vue-cli
　　下载 npm i vue-cli -g
　　创建项目 vue init webpack xxx
　　启动项目
　　　　cd xxx
　　　　npm run dev/start
　　目录结构
　　　　build
　　　　config
　　　　node_moudules
　　　　src
　　　　static
　　　　index.html
　　　　package.json

 

elementUI中icon在webpack打包后不显示的问题

elementUI中icon在webpack打包后不显示的问题

最近在项目中遇到elementUI中icon在webpack打包后不显示的问题，记录一下解决方案。

本项目使用的是webpack的MiniCssExtractPlugin进行打包，我看网上很多都是ExtractTextPlugin的解决方法，但是ExtractTextPlugin在webpack4中会有点问题，所以现在基本都是使用MiniCssExtractPlugin。

在build/webpack.base.conf.js中

module:{
　　rules: [　
　　　　...(config.dev.useEslint ? [createLintingRule()] : []),
　　　　
　　　　{
　　　　　　test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
　　　　　　loader: ''url-loader'',
　　　　　　options: {
　　　　　　　　limit: 10000,
　　　　　　　　 publicPath: ''../../'',
　　　　　　　　name: utils.assetsPath(''fonts/[name].[hash:7].[ext]'')
　　　　　　}
　　　　}
　　]　　
}
 
因为打包后woff、eot、ttf、otf的路径找不到才导致404，所以将这几个的publicPath设为''../../''再打包就可以了。
 
 

elementui的表格正确使用骨架屏vue-elementui-skeleton

elementui的表格正确使用骨架屏vue-elementui-skeleton

1、安装

npm i vue-elementui-skeleton

2、引入

import Vue from ''vue'';
import VueElementUISkeleton from ''vue-elementui-skeleton'';

Vue.use(VueElementUISkeleton, {
    directiveName: ''skeleton'',
    rows: 10,
    radius: 3,
    bg: ''red''
});

// 可以设置选项的全局默认值和指令名称
/*
Vue.use(VueElementUISkeleton, {
    directiveName: ''skeleton'',
    rows: 10,
    radius: 3,
    bg: ''red''
});
*/

3、引用

<template>
  <el-table
     v-skeleton="{loading: loading, rows: 10}"
    :data="tableData">
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    />
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    />
    <el-table-column
      prop="address"
      label="地址"
    />
  </el-table>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                tableData: []
            };
        },
        mounted() {
            // 模拟请求耗时2s
            let that = this;
            that.loading = true;
            setTimeout(function () {
                that.loading = false;
                that.tableData = [{
                    date: ''2016-05-02'',
                    name: ''王小虎'',
                    address: ''上海市普陀区金沙江路 1518 弄''
                }, {
                    date: ''2016-05-04'',
                    name: ''王小虎'',
                    address: ''上海市普陀区金沙江路 1517 弄''
                }, {
                    date: ''2016-05-01'',
                    name: ''王小虎'',
                    address: ''上海市普陀区金沙江路 1519 弄''
                }, {
                    date: ''2016-05-03'',
                    name: ''王小虎'',
                    address: ''上海市普陀区金沙江路 1516 弄''
                }];
            }, 2000);
        }
    };
</script>

nodejs+npm+webpack+vue+ElementUI+vue-route

nodejs+npm+webpack+vue+ElementUI+vue-route

  • nodejs安装，https://nodejs.org/en/download/，windows系统安装msi文件
  • nodejs安装自带npm，升级npm
npm install npm -g

淘宝国内npm镜像安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
  • webpack安装，安装webpack模块，-g代表全局安装，去掉则问当前目录下的安装
npm install webpack -g

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

cnpm install css-loader style-loader -g
  • vue安装
# 最新稳定版
$ npm install vue -g
  • elementUI安装
npm i element-ui -S

我们今天的关于webpack1.x + ElementUI 初探和webpack ejs的分享就到这里，谢谢您的阅读，如果想了解更多关于element-ui和npm、webpack、vue-cli搭建Vue项目、elementUI中icon在webpack打包后不显示的问题、elementui的表格正确使用骨架屏vue-elementui-skeleton、nodejs+npm+webpack+vue+ElementUI+vue-route的相关信息，可以在本站进行搜索。

本文标签：

上一篇svg的x和dx属性有什么区别？ - What is the difference between svg''s x and dx attribute?

下一篇[Spring4.x]基于spring4.x纯注解的非Web工程搭建（springmvc非注解配置）

相关文章