1. 程式人生 > >Vue專案搭建 + 引入ElementUI

Vue專案搭建 + 引入ElementUI

初始化單頁系統

在學習Vue的過程中,官方網站都是給了非常詳細的介紹,所以初始化大型單頁應用,官網給的參考資料地址:https://cn.vuejs.org/v2/guide/installation.html

1、NPM

在這裡插入圖片描述

2、命令列工具 (CLI)

在這裡插入圖片描述

3、具體操作步驟

【第一步】在004目錄下右鍵,然後選擇------在命令提示符中開啟
在這裡插入圖片描述
【第二步】輸入npm install vue
在這裡插入圖片描述
【第三步】安裝命令列工具vue-cli:cnpm install vue-cli --global
在這裡插入圖片描述
【第四步】初始化專案的命令:vue init webpack 專案名
在這裡插入圖片描述
【第五步】進入專案命令:cd my-project
在這裡插入圖片描述


【第六步】執行專案:npm run dev
在這裡插入圖片描述
【第七步】訪問專案,如果一切成功,那麼會出現下圖所示頁面,系統初始化成功
在這裡插入圖片描述

系統目錄介紹

1、經過操作,專案my-project已經初始化成功,目錄結構如下:
在這裡插入圖片描述

3. 修改專案

1、修改App.vue,刪除無關內容

在這裡插入圖片描述

<template>
<div id="app">
<router-view/>
</div>
</template>

<script>
export default {
}
</script>
<style>
</style>

2、修改main.js程式碼

在這裡插入圖片描述

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: c=> c(App)
})

3、修改HelloWorld.vue元件中的程式碼

在這裡插入圖片描述

ElementUI整合專案

在專案中,我們採用ElementUI作為系統框架,所以需要安裝ElementUI框架
ElementUI框架官網地址:http://element-cn.eleme.io/#/zh-CN/component/installation
1、安裝ElementUI: cnpm i element-ui -S
i : 安裝指令,全拼:install
-S :生產環境,全拼:--save
-D :開發環境,全拼:--save--dev
-O :可選依賴,全拼:--save--optional
-E :精確安裝指定模組版本,全稱:--save--exact
-g:全域性安裝,全拼:--global

在這裡插入圖片描述
2、在main.js中引入ElementUI模組
在這裡插入圖片描述

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: c => c(App)
})