如何搭建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可以實現界面跳轉，如有寫的不對的地方，歡迎指正。