安裝vue-cli 3 VUE腳手架（詳細講解）

vue-cli < 3
https://blog.csdn.net/qq_43764578/article/details/102495707這個是之前老版本的講解

vue-cli >= 3

爲什麼要安裝vue-cli >= 3，首先vue-cli >= 3的版本，比2.0的配置文件簡潔了很多，當然你還得跟上時代的腳步，不然你就被淘汰了。

現在來開始安裝vue-cli >= 3 VUE腳手架

//首頁你可以在cmd命令行查看下現在的版本
vue -V//注意要用大寫V

當然你要開始安裝最新版的腳手架你得先卸載之前安裝好的老版本腳手架

  npm uninstall -g vue-cli  //卸載之前的
  npm install -g @vue/cli   //安裝最新的

安裝完最新的腳手架可以用“vue -V”來檢查一下腳手架版本
然後就開始構建項目

vue create project-name

最新版的跟之前老版本的不一樣 千萬別弄錯

輸入完命令你會看見這個界面 咱們先選擇手動安裝

注意（*）不是按回車 要用數字來控制（1，4，5，6，7）// 2020-4-10 目前這樣按就對了
選擇完之後按回車進行下一步操作

然後確認 選擇Less編譯方式

選擇 package.json

然後輸入y回車

整體就是這樣se了 這一步就是幫你保存操作方便下次開發不用再去選了 回車可以直接跳過


然後我們來看看目錄結構 修改一些文件

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


router.beforeEach((to, from, next) => {
 
    if (to.meta.title) {
        document.title = to.meta.title
    }
    next()
})

Vue.config.productionTip = false

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

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/HelloWorld'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
	meta: {
	  title: '首頁',
	},
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

然後就可以運行項目了

npm run serve

有什麼問題歡迎評論留言，我會及時回覆你的