第一回：官网起步式

以前的官网

image.png

现在的官网

image.png

地址没变......
https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI

靠，这怎么玩儿

我们随便玩儿一下，跟着感觉走
原来的命令行都不见了，给了这么一句话：Vue 提供了一个[官方的 CLI]，地址我这里贴出来https://cli.vuejs.org/zh/guide/installation.html

image.png

image.png

image.png

image.png

看了vue serve说明，快速原型开发？哦！有点懂了，以前我们写前端页面不论是idea，webstorm，还是vscode右上角有各种浏览器可以边编辑边预览页面效果，那么vue文件中你如果点击右上角的那些浏览器图标弹出的页面是让你下载当前这个vue文件，它不会帮你解析成html解析

image.png

image.png

靠！那咋办，我画一个简单的vue原型页面还要打开笨重的脚手架项目吗？或者自己
创建一套脚手架项目？好麻烦！帮我搞一个能解析vue的工具就可以了，但是上面说的几个ide工具都办不到，必须依赖脚手架，但是又不想在笨重的脚手架项目里搞来搞去，所以vue serve就有用了。

首先，创建个空文件夹vue-serve，里面可以手动创建一个txt文本文件，放入一些vue标签，然后保存把后缀改成.vue,总之就是手动搞一个vue后缀的文件，或者你copy一个随便，或者直接用ide前端代码工具打开这个文件夹直接创建一个vue文件，然后在这个文件夹中启动cmd，然后执行命令
vue serve

image.png

image.png

image.png

image.png

如果我想看看app2的怎么办？把app.vue删掉？

image.png

看来兔羊兔深破，人家提示不管你是谁，但是要想启动就给我这几样东西之一，就像文档里说的

你所需要的仅仅是一个 App.vue

就是app.vue还是App.vue总得给我一个，我只认这个，所以想看别的页面效果你就用组件嵌套到app里去跳转切换的看吧。

第二回：开始真正的vue-cli3.x版本以上的脚手架吧

vue create hello-world
不用看，这就是创建项目的命令，hello-world是你的项目名称，不管那么多先执行看看

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

好的再来一遍，这回我们选择2.x

image.png

image.png

image.png

image.png

image.png

image.png

第三回：回到真正的vue-cli2.x的脚手架吧

执行创建项目
vue init webpack hello-world5
咦，熟悉的界面又回来了

image.png

image.png

image.png

image.png

好了没什么大惊小怪的，再来一遍加上router康康

image.png

一样的操作，但是有两个yes，康康项目结构

image.png

image.png

那么我想用回vue-cli2.x版本，当前是vue-cli3.x版本以上，那就卸载呗。
npm uninstall -g @vue/cli
然后查看版本vue -V什么都没有，那就安装vue-cli2.x
npm install -g vue-cli
默认安装好的版本vue -V 查看是 vue-cli2.9.6，我们创建项目吧
vue create mypg
我去，失败？告诉我你CLI2.x的版本竟敢使用我CLI3.x以上的命令，你要么把CLI2.x卸载，然后装我CLI3.x吧

图片.png

第三回：踩坑对比脚手架

用vue-cli2.9.6创建一个项目，创建时勾选路由，然后就有了一个带路由的项目，我们做个小实验，将elementui的菜单放入app.vue中看效果

image.png

main.js中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

启动项目npm run dev，查看效果

image.png

点击选项一，发生了跳转

image.png

image.png

那么，为什么发生跳转，页面怎么没跳？第一，首先得确认有没有这个路由路径，你点击了它会去全局的路由里面去找，那么全局路由是哪一个噻？没猜错的话是这一个

image.png

image.png

image.png

image.png

image.png

好的，启动看效果，我们来跳转一下，我们通过路由找到了这个组件页面，就是当初的helloworld.vue组件

image.png

同样的操作我们再来一遍

这时我们创建一个不带路由的vue-cli2.x，引入elementui的menu

image.png

image.png

import VueRouter from 'vue-router'
Vue.use(VueRouter)

首先项目启动成功，但是控制台报错Error in render: "TypeError: route is undefined"，页面显示白板，什么都显示不出

image.png

注释掉<router-view/>可以正常显示

image.png

点击“选项1”跳转Chrome报错
element-ui.common.js?ccbf:3383 TypeError: Cannot read property 'push' of undefined

表示没有所谓的router可用，手动引入router后，其它明明两个项目都一样为毛报错，以为是框架版本问题，还是多从自身找问题吧，两个项目真的一样吗？至少一个有router文件夹index.js路由文件，而另一个则没有。我们不一样。。。不一样。。。歌声响起来

image.png

结果显示一切正常，当然刚刚注释掉的<router-view/>可以放开了，去掉或者保留vue-router这个引用好像并不影响结果。那么自己挖的坑自己填上，main.js里引入router就此一种，就是以下这种，引入的是我们配置的“路由规则js文件”

import router from './router'   //找到项目中的路由js文件
new Vue({
  el: '#app',
  router, //引入Vue中
  components: { App },
  template: '<App/>'
})

而以下这种引入方式，引入的是全局安装的路由Router这个插件，

import Router from 'vue-router'
Vue.use(Router)
//这里会用到
export default new Router({
  routes: [
    {
      path: '/home',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

总结：基础操作不扎实，学会这个就忘了那个，记得不牢容易遗漏，而且对网上资源理解太片面容易踩坑。

不管vue-cli3.x还是vue-cli2.x关于路由引入，一种是创建项目是勾选自动安装一切帮你搭建好了，另一种手动引入，首先执行安装命令，然后手动创建配置路由的index.js文件，在index.js文件里引入vue-router，然后把这个index.js文件引入main.js,那么就大功告成了。