快捷搜索: 王者荣耀 脱发

Vue.js入门(一)之脚手架@vue/cli创建vue项目

其实Vue的官方文档 写的已经非常详尽了,我个人认为关于Vue.js的基础教学视频和博客其实都是多余的.我无意冒犯很多同行以及前辈的整理和踩坑,我想表达的是,一个合格的开发者应该从文档入手学习和使用一项你从来没使用过的技术,一方面是任何技术的周边,包括视频和博客其实都是官网的搬运工,另一方面,为了提高学习和开发效率,对于Vue这种文档支持较好的前端框架,我们只看文档就够了,也许看文档你已经搭建出来一个简单项目并且开始写页面了,但是看视频可能得需要看半个小时才开始动手,两者对比,一目了然.

笔者这个系列的文章,一是做整理记录,二是希望给一些入门编程的人提供一些前车之鉴,消除对陌生技术的恐惧感.

不积跬步,无以至千里,不积小流,无以成江海.我们要对前辈和大神保持尊重和谦卑,但我们无需自卑.

笔者这篇文章默认你已经安装了NodeJs 并且对npm install 和 npm uninstall 有了基本认识和使用.

接下来就和我一起跟着官方文档来用官方脚手架创建一个Vue项目吧.

一 安装脚手架

打开网址 你会看到下面的页面

这里有一点需要注意,就是如果你已经安装了Vue cli2那么你需要先把它卸载掉再安装Vue cli3

如果你 输入 vue --version 能看到相关的版本信息,那么接着往下看.

二 创建项目

和vue cli2创建项目的命令有所不同,vue cli3(即@vue/cli)使用的命令是

vue create 项目名

①首先先在你的工作目录中创建一个空文件夹,进入它,(用命令行方式操作) 然后输入 vue create 你的项目名 回车

选择手动配置特性 回车

接下来,它提示你手动选择一些插件,按空格键选中或取消勾选 选择完自己想要的插件之后按回车

接下来,它会询问说,你上面选择的这些插件,我把它们配置到哪里,是配置在指定的配置文件中还是package.json? 我一般选择package.json,当然你自己指定也可以

按回车,然后它问你,需要把这个项目保存成一个模板项目(方便以后你使用)吗,需要输入y不需要就输入n回车,

然后等它开始创建项目 .

创建成功如下图

它会提示你,进入项目目录,运行yarn serve

如果你不知道yarn是啥,进入项目目录之后运行 npm run serve 回车就ok了.

经验分享 程序员 微信小程序 职场和发展