安装

# 安装vue-cli（全局安装，只安装一次）
npm install -g @vue/cli
# OR
yarn global add @vue/cli

# 安装项目
# macos修改权限
# sudo chown -R 501:20 "/Users/chen/.npm"
(sudo) vue create my-project

安装web3

sudo npm install web3

快捷生成vue模板

<v 按Tab键

安装vue-router

# 使用vue2时，vue-router使用3版本
sudo npm install vue-router@3
# main.js文件注册路由
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router: router
}).$mount('#app')

使用vue-router

src目录下创建router文件夹，创建index.js文件

//该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router'

import Home from '@/components/Home.vue'
import Token from '../pages/Token.vue'
import Swap from '../pages/Swap.vue'

//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/',
            component: Home, // Home.vue
        }
        ,{
            path: '/token',
            component: Token,
        }
        ,{
            path: '/token',
            component: Swap,
        }
    ]
})

App.vue文件：

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

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  // components: {
  //   HelloWorld
  // }
}
</script>

安装axios

npm install axios --save

安装element-ui

npm install element-ui -S

使用element-ui

//main.js加入以下代码
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)