【前端----Vue】Element UI框架搭建

1.webpack 全局安裝

npm install -g webpack

2.淘寶鏡像cnpm安裝

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.vue腳手架全局安裝 -- 用於生成vue模板

npm install -g vue-cli

4.使用腳手架構建vue項目 -- 一路回車就行了

vue init webpack

如果提示vue不是內部或外部命令說明沒有配置環境變量，找到vue.cmd所在目錄，加到環境變量path裏

目前可用的模板：

browserify：全功能的Browserify + vueify，包括熱加載，靜態檢測，單元測試。

browserify-simple：一個簡易的Browserify + vueify，以便於快速開始。

webpack：全功能的Webpack + vueify，包括熱加載，靜態檢測，單元測試。

webpack-simple：一個簡易的Webpack + vueify，以便於快速開始。

5.element-ui安裝

npm i element-ui

6.依賴安裝，這裏用cnpm安裝，因爲依賴太多耗時很長，最後會在項目中生成一個node_modules文件

cnpm install

7.大功告成，這裏可以運行了

npm run dev

 

vue項目的構建到現在就算完成了，那麼現在就引入element-ui組件模塊，這裏以radio組件爲例

1.在\element-ui\src\components\新建個vue組件，組件名爲radio

radio組件代碼 

<template>
    <el-radio-group v-model="value">
        <el-radio :label="1">選項1</el-radio>
        <el-radio :label="2">選項2</el-radio>
        <el-radio :label="3">選項3</el-radio>
    </el-radio-group>
</template>

<script>
    export default {
        data() {
            return {
                value: 3
            };
        }
    }
</script>

2.在element-ui\src\router.js中設置路由

import radio from '@/components/radio' //引入剛創建的組件
//設置路由
{
      path: '/radio',
      name: 'radio',
      component: radio
}

如圖

 

3.在\element-ui\src\main.js中加入element-ui的js和css

import ElementUI from 'element-ui' //element-ui的全部組件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css

Vue.use(ElementUI) //使用elementUI

如圖

 

4.大功告成，運行後的效果就是這個樣子

 

最後，項目初始時，默認安裝ESLint（ESLint是一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼）的原因，關閉ESLint方法： 將下圖中的代碼註釋掉重啓即可