vue-cli3.0创建项目,vue-cli3.0各项配置与安装, vue-cli3.0 上手教程 (二)

24 篇文章 1 订阅
9 篇文章 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官方文档推荐的在线工具修改(文档地址

     (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 })

 

 

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

随便起的名字也被占用

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值