vue-cli3.0創建項目，vue-cli3.0各項配置與安裝， vue-cli3.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 })

 

 

未完待續............................