安装vue-cli >= 3 VUE脚手架（详细讲解）

安装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

有什么问题欢迎评论留言，我会及时回复你的