vue-cli構(gòu)建基于webpack的項目
-
使用vue-cli構(gòu)建項目
vue init webpack project-name #創(chuàng)建基于webpack模板的名為project-name的項目 * 一路按回車撤蚊，直到ESlint選項的時候選擇否* -
安裝項目依賴
cd project-name //進(jìn)入項目目錄 npm install //安裝項目依賴 npm run dev //運行項目 -
瀏覽器打開localhost：8080即可看到歡迎頁面
但是這個只能在本地跑，要如何在我們自己的服務(wù)器上訪問呢？此時需要執(zhí)行npm run build
引入Element-UI及配置
-
在項目中引入Element-UI
cd 項目目錄 npm i element-ui -S成功引入后可在node_modules中找到element-ui文件夾，也可以在package.json文件中的dependencies屬性中找到element-ui依賴
-
配置main.js
import Vue from 'vue' import App from './App' import router from './router' ***************完整引入element-ui************** import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ********************END*********************** Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) -
檢查是否引入成功
在App.vue中插入一小段Element-UI代碼查看頁面是否顯示
<template> <div id="app"> <!-- <Test></Test> --> <img src="./assets/logo.png"> <router-view/> *************插入示例代碼部分************************* <el-row> <el-button>默認(rèn)按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">信息按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險按鈕</el-button> </el-row> ******************END******************************** </div> </template> -
關(guān)閉ESlint檢查
關(guān)閉的目的是為了防止報一些縮進(jìn)等代碼格式類的錯誤位衩。
module: { rules: [ ********************注釋掉此行******************************** // ...(config.dev.useEslint ? [createLintingRule()] : []), **********************END*********************************** { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig },
