之前用過(guò)react，沒(méi)有還使用過(guò)vue僧须，今天先簡(jiǎn)單的把項(xiàng)目架起來(lái)~
首先 腳手架先down下來(lái)
npm install -g @vue/cli
創(chuàng)建項(xiàng)目纲刀，安裝依賴(lài)
vue create mypro
npm install
最后 使用 npm run serve 啟動(dòng)項(xiàng)目！
頁(yè)面是不是出來(lái)了呢担平，現(xiàn)在我要一步步修改了
新增幾個(gè)文件夾示绊；
assets 靜態(tài)資源
components 公共組件
router 路由
store vuex的數(shù)據(jù)狀態(tài)管理文件
styles 公共樣式
views 視圖文件
image.png
大概先安裝這幾個(gè)依賴(lài)吧 （package.json）
"dependencies": {
"axios": "0.18.0",
"element-ui": "^2.4.8",
"font-awesome": "4.7.0",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.5",
"@vue/cli-plugin-eslint": "^3.0.5",
"@vue/cli-service": "^3.0.5",
"babel-plugin-component": "^1.1.1",
"css-loader": "1.0.0",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
},
main.js 是項(xiàng)目的入口文件，主要作用是初始化vue實(shí)例并使用需要的插件
import Vue from 'vue'
import ElementUI from 'element-ui' // elementUI引入
import 'element-ui/lib/theme-chalk/index.css' // elementUI引入
import App from './App.vue'
import router from './router'
import store from './store'
import '@/styles/index.scss' // 引入公共樣式
Vue.config.productionTip = false
Vue.use(ElementUI); // elementUI引入
new Vue({
el: '#app', // 與app.vue 保持一致
router, // 引入路由
store,
render: h => h(App)
}).$mount('#app')
app.vue 是主組件暂论，所有組件的父組件
<template>
<div id="app">
<router-view/> // 可以視做一個(gè)容器面褐，裝要渲染的組件
</div>
</template>
<script>
export default{
name: 'app'
}
</script>
在router下的index.js我配置了兩個(gè)路徑，"/" 和 “home”
import Vue from 'vue'
import VueRouter from 'vue-router' // 我下的可能不是最新版本的取胎，最新可能是Router 注意上下文保持一致
Vue.use(VueRouter)
export const constantRouteMap = [
{
path: '/',
component: () => import('@/views/hello/index'),
hidden: true
},
{
path: '/home',
component: () => import('@/views/login/index'),
hidden: true
}
]
export default new VueRouter({
scrollBehavior: () => ({ y: 0 }),
routes: constantRouteMap
})
根路徑下 '/' my-pro\src\views\hello\index.vue
image.png
HelloWorld.vue
image.png
一個(gè)簡(jiǎn)單的頁(yè)面就出來(lái)了展哭，可以繼續(xù)開(kāi)發(fā)了
image.png
