第一回：官网起步式
以前的官网
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
一眼看到要求node版本，赶紧启动cmd，node -v查看一下，还好我装了，版本远远高出它要求的v8.9
image.png
安装一下脚手架vue-cli这是旧版，新版@vue/cli是这样的，命令是这样的
npm install -g @vue/cli
执行后安装好vue在cmd中就是一个有效的命令了，我们看看此时版本信息vue -V，当然用这个也可以vue --version
image.png
快速开发原型？这又是个什么鬼简单点不好吗？
image.png
但是，手贱没办法，稀里糊涂就执行了这条命令，这玩意儿不会影响我的脚手架环境吧？
npm install -g @vue/cli-service-globa
看了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
好了看起来和脚手架启动的项目没什么两样，启动时会多出一个node_modules文件夹
image.png
好吧，用idea打开启动看看，效果是一样的
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
哦！发现版本不一样我的Vue CLI v4.5.9，官网的Vue CLI v3.4.0，然后我就多了一个这玩意儿Choose Vue version，至于其他没什么两样，就按它默认的选择，回车继续（移动键盘上下箭头用空格可以选择和取消），是这样的
image.png
让选vue.js版本，我们先选3.x，回车继续
image.png
选择ESLint + Standard config继续
image.png
回车继续
image.png
下个页面输入n，不保存预设，继续，然后完成看看项目结构
image.png
image.png
好的再来一遍，这回我们选择2.x
image.png
看看项目结构，没什么两样，区别在这里"vue": "^2.6.11"，vue-cli的版本和vue.js的版本不要搞混，前者在cmd中用命令vue -V查看，后者在项目里配置依赖管理里面查看package.json
image.png
image.png
好的再来一遍，这次用2.x 加个路由Router
image.png
看看项目结构，多了些东西
image.png
好了，到这里可以放心大胆的创建项目了，有没有坑？我们试试看。
等等，还有些骚操作，你的创建项目方式怎么跟网上的不一样，别人用的是这个命令
vue init webpack hello-world那就试试看呗
image.png
靠，报错，仔细一看这玩意儿是vue-cli2.x的命令，我都vue-cli4.x了不支持了，看你这么骚，那就全局安装一下以下命令就可以了
npm install -g @vue/cli-init然后此时就已进入vue-cli2.x的世界
第三回：回到真正的vue-cli2.x的脚手架吧
执行创建项目
vue init webpack hello-world5
咦，熟悉的界面又回来了
image.png
然后一问一答，就不多说啦
image.png
看看项目结构，咦！是这样子启动的npm run dev
image.png
image.png
好了没什么大惊小怪的，再来一遍加上router康康
image.png
一样的操作，但是有两个yes，康康项目结构
image.png
没啥特别的，多了router而已，多了eslint
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
算了我老老实实用CLI2.x的命令吧 vue init webpack hello-world
第三回：踩坑对比脚手架
用vue-cli2.9.6创建一个项目，创建时勾选路由，然后就有了一个带路由的项目，我们做个小实验，将elementui的菜单放入app.vue中看效果
image.png
但是前提是你先安装了elementui才行，怎么装？去官网吧https://element.eleme.cn/#/zh-CN/component/menu 算了！迁就你，我还是把命令贴出来吧
npm i element-ui -S
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
那么我在app.vue里玩儿怎么能找到你router呢？所以早就帮你在创建项目时就引入main.js里了，main.js当然就是全局的啦，同理你的router也是在App.vue里随便调用了
image.png
但是elementui底层帮我们调用了router没问题，然后呢？调完接收怎么处理在哪里显示呢，export default new Router（）这里明明输出了一堆东西给我们用，我也不知道怎么用。但是vue-cli会帮我们处理，你只管告诉我你要跳转的路径name或path，反正就是index=" "里面的内容，我会去export default new Router（）输出这堆东西里找，找到后从这个出口标签显示 <router-view/>，就这么简单
image.png
我们来试试看，改一下菜单路由index="/home"，home可以看做路径，可以随便命名，但是斜杠不能少，哪怕少了路径名称也不能少斜杠
image.png
修改一下全局路由文件index.js,同理哪怕少了路径名称也不能少斜杠，路径名称要一致
image.png
好的，启动看效果，我们来跳转一下，我们通过路由找到了这个组件页面，就是当初的helloworld.vue组件
image.png
就这样，以后我们基本上就在这个视口 <router-view/>里书写人生，施展奇技淫巧。
同样的操作我们再来一遍
这时我们创建一个不带路由的vue-cli2.x，引入elementui的menu
image.png
启动npm run dev一气呵成，点击，跳转，没反应！我嚓！
image.png
爆红！表示找不到？不存在？没这个东西？ 确实elementui点击事件是触发了，但是在全局js中找不到有关路由的东西，因为main.js里确实没有路由的相关引入。接下来一大波骚操作来袭，俗称之为坑！我以为执行一条命令全局安装路由就能自动结合elementui用起来了。
npm install vue-router --save好的，先停一下项目ctrl+c Y退出，执行命令安装好vue-router,在main.js中引入，这下全局有路由了吧，不会找不到了吧，再次启动
import VueRouter from 'vue-router'
Vue.use(VueRouter)
首先项目启动成功，但是控制台报错Error in render: "TypeError: route is undefined"，页面显示白板，什么都显示不出
image.png
注释掉<router-view/>可以正常显示
image.png
点击“选项1”跳转火狐报错
TypeError: route is undefined
点击“选项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
}
]
})
总结：基础操作不扎实，学会这个就忘了那个，记得不牢容易遗漏，而且对网上资源理解太片面容易踩坑。
网友评论