vue-cli3.0创建项目，vue-cli3.0各项配置与安装， vue-cli3.0 上手教程（二）

今天药忘吃喽~ 2022-03-17 02:56 187阅读 0赞

## 一、解决模板编译的问题 ##

在升级脚手架到vue-cli3.0版本的时候出现了这个报错：

\[Vue warn\]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

我在这里大概说一下出现这个报错的原因在哪里和解决办法

原因  
vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式， 指向了"dist/vue.runtime.common.js"位置。

这是vue升级到2.0之后就有的特点。

而我的app.vue文件中，初始化vue却是这么写的，这种形式为compiler模式的，所以就会出现上面的错误信息

new Vue({
      el: "#app",
      router,
      store,
      components: { App },
      template: "<App/>"
    });

方法一：改成这样就好了

new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");

方法二：

到这里我们的问题还没完，那为什么之前是没问题的，之前vue版本也是2.x的呀？

这也是我要说的第二种解决办法

因为之前我们的webpack配置文件里有个别名配置，具体如下

resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式  vue结尾的
        }
    }

也就是说，import Vue from ‘vue’ 这行代码被解析为 import Vue from ‘vue/dist/vue.esm.js’，直接指定了文件的位置，没有使用main字段默认的文件位置

所以第二种解决方法就是，在vue.config.js文件里加上webpack的如下配置即可，

configureWebpack: {
        resolve: {
          alias: {
            vue$: "vue/dist/vue.esm.js"
          }
        }
      },

方法三：vue.config.js 提供有方法runtimeCompiler

//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
      runtimeCompiler: true,

二、在项目中使用elementUI

1、安装element

npm i element-ui -S

2、引用element

main.js中

// main.js
    
    import ElementUI from "element-ui";
    import "element-ui/lib/theme-chalk/index.css";
    
    Vue.use(ElementUI, { size: "small", zIndex: 3000 });

3、如何改变element-ui的主题色

（1）使用element官方文档推荐的在线工具修改（[文档地址][Link 1]）

（2）在线修改主题色，然后点击下载，将主题色修改过后的文件下载到本地

（3）将文件放入项目中的src文件下，我是放在 src/assets/element-z

（4）在main.js中引用

import ElementUI from "element-ui"
    import "./assets/element-z/index.css";
    
    Vue.use(ElementUI, { size: "small", zIndex: 3000 })

这样就修改了

第二种方法：如果项目使用scss推荐使用

在项目中改变 SCSS 变量

Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 `element-variables.scss`，写入以下内容：

/* 改变主题色变量 */
    $--color-primary: teal;
    
    /* 改变 icon 字体路径变量，必需 */
    $--font-path: '~element-ui/lib/theme-chalk/fonts';
    
    @import "~element-ui/packages/theme-chalk/src/index";

然后在main.js中引入

import ElementUI from "element-ui"
    import "./assets/css/element-variables.scss"
    
    Vue.use(ElementUI, { size: "small", zIndex: 3000 })

未完待续............................

[Link 1]: http://element-cn.eleme.io/#/zh-CN/component/custom-theme