vue.js、element-ui、vuex环境搭建实例分享-js教程-PHP中文网

vue.js、element-ui、vuex环境搭建实例分享

小云云

发布： 2018-03-07 13:19:35

原创

3911 人浏览过

本文主要和大家分享vue.js、element-ui、vuex环境搭建实例，本文主要以图文实例和代码分享，希望能帮助到大家。

一、初始化项目

vue init webpack

登录后复制

这里写图片描述

二、初始化依赖包

npm install

登录后复制

三、运行调试

npm run dev

登录后复制

地址栏输入localhost:8080

这里写图片描述

四、导入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

登录后复制

项目目录
这里写图片描述

八、修改调试

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文件：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

登录后复制

目录结构：

列表内容