首頁 > web前端 > js教程 > 主體

vue.js、element-ui、vuex環境建構實例分享

小云云
發布: 2018-03-07 13:19:35
原創
3911 人瀏覽過

本文主要和大家分享vue.js、element-ui、vuex環境建立實例,本文主要以圖文實例和程式碼分享,希望能幫助大家。

一、初始化項目

vue init webpack 
登入後複製

vue.js、element-ui、vuex環境建構實例分享

二、初始化依賴套件

npm install
登入後複製

三、執行偵錯

npm run dev
登入後複製

位址欄輸入localhost:8080

vue.js、element-ui、vuex環境建構實例分享

四、導入elementUI套件

npm install --save vue element-ui
登入後複製

五、導入vue-router套件

npm install --save vue-router
登入後複製

六、導入axios套件

npminstall --save axios
登入後複製

七、安裝sass-loader以及node-sass外掛程式

npm install sass-loader -Dnpm install node-sass -D
登入後複製

專案目錄
vue.js、element-ui、vuex環境建構實例分享

八、修改偵錯

main.js裡面引入vue element 和router:

import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';import VueRouter from 'vue-router'Vue.use(ElementUI)
Vue.use(VueRouter)
登入後複製

vue.js、element-ui、vuex環境建構實例分享

#新登入vue檔案:Ulogin.vue

登入後複製

router內index.js檔案設定路由:

import Ulogin from '../components/Ulogin'Vue.use(Router)

export default new Router({
  routes: [    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // },
    {
      path:'/',
      name:'',
      component:Ulogin
    }
  ]
})
登入後複製

App.vue

登入後複製

目錄結構:

vue.js、element-ui、vuex環境建構實例分享

執行:npm run dev
vue.js、element-ui、vuex環境建構實例分享
vue.js、element-ui、vuex環境建構實例分享
vue.js、element-ui、vuex環境建構實例分享

#相關推薦:

vue、node、webpack環境建置教學課程詳解

實例詳解vue環境建置簡單教學

2017年最好用的6個php環境搭建工具推薦

以上是vue.js、element-ui、vuex環境建構實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!