vue3.0 使用vue前(安装vue脚手架) 001
2018-12-05 本文已影响140人
一个不知名的前端

不想看废话的童鞋:
1.安装node。
2.依次的命令是:
npm install -g @vue/cli
vue create hello-world
cd hellow-word
npm run serve
用vue有一段时间了,但是没有做过深入的学习,做项目一直是查查查,复制复制复制,改改改,从本章开始我将从最初使用vue到现在的灵活运用做一个总结,也算是复习和自我学习了。
------ * 我将从脚手架讲起,因为现在外面的项目都是脚手架的形式。
可参考 vue中文网:https://cn.vuejs.org/
vue脚手架的搭建
1.安装node环境,ndoe.js官网:https://nodejs.org/zh-cn/;
因为我的是mac 所以默认是macOS下载,win同理。

下载好后傻瓜式安装好,win打开cmd,mac打开终端,输入node - v,出现版本号证明安装成功,npm是node里自带的下载插件工具,你也可以npm -v,如果感觉npm下载太慢可以用阿里给出的方案npm install cnpm -g,然后用cnpm代替npm。
2.下载vue,命令 npm install -g @vue/cli 此为稳定版本,下载好后vue -V(大写的v),查看是否安装成功。
然后就可以开始创建项目了,相信同学们对命令都很熟悉我就不废话了,
创建命令:vue create hello-world;
(1)创建后出现这样的选项,第一个选项是默认给你安装babel和eslint,第二个选项是手动安装你想要的。

在这里我就手动安装让同学们看一下。

上图可以看到他会默认选中俩个选项,你可以根据自己的需求手动选择,一般router和vuex是必选项,然后一直默认确定就好。
3.安装好后 命令输入 cd hellow-word 进入目录。
4运行项目 命令输入 npm run serve 即可运行 然后浏览器输入 http://localhost:8080/ 就可以看到了。
