如何搭建vue项目

如何利用Node配置vue的运行环境，我就不多说了，大家可以自行配置，安装好了环境，我们来介绍一下怎么新建一个vue的项目。

一、新建项目

利用vue-cli创建vue项目，执行命令：

vue create hello-world

生成对应目录：

二、添加相关依赖

//添加iView
npm install view-design --save
//添加vue-router
npm install vue-router --save
//添加vuex状态管理
npm install vuex --save

三、vue项目配置router和iView

（1）在src目录下，新建router.js文件夹，配置对应的组件信息，export导出router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import Test from './pages/dataService/Test.vue'
import DataService from './pages/dataService/DataService.vue'

const router = new VueRouter({
    routes: [
        { path: '/', component: DataService,name:'主页面'},
        { path: '/test', component: Test, name: "测试" },
        {
            path: '/dataService', component: DataService, name: "数据需求"
        }
    ]
});
router.beforeEach((to, from, next) => {
    next()
});
export default router;

（2）在main.js文件中引入相关的依赖

import Vue from 'vue'
import App from './App.vue'
import './asserts/common.css'
import "./asserts/fonts/iconfont/iconfont.css";

import iView from 'view-design'

//引入iView对应的样式
import 'view-design/dist/styles/iview.css';

import Vuex from 'vuex'
import router from './router'

Vue.use(iView, { transfer: true });
Vue.use(Vuex);

Vue.config.productionTip = false

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

（3）在App.vue中引入router-view，展示对应的布局

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

export default {
  name: "app",
  components: {
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

这样一个vue项目基本架构就搭建完成，vue-router可以实现界面跳转，如有写的不对的地方，欢迎指正。