Vue创建一个基本的项目

97 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第20天,点击查看活动详情

脚手架下载

在我们开发项目的时候必然需要使用到Vue CLI,CLI就是Command-Line InterFace,俗称脚手架,Vue CLI是vue官方发布vue.js项目脚手架,它可以帮我们快速搭建Vue开发环境和对应的webpack配置

使用脚手架的前提就是安装node,因为脚手架会生成webpack配置,而webpack配置本身又是依赖node,node版本需要8.9以上或者更高版本,可以在官网下载

安装了node会顺带安装npm,然后就可以通过npm install -g @vue/cli全局安装脚手架了,安装完可以通过vue -V或者vue --version来检测是否安装成功

图片.png

使用脚手架创建一个基本的项目

创建项目的命令为vue create project,project就是项目的名字了,项目名字不能包含大写字母,回车运行之后就会弹出配置选项,有三个配置,一个是vue2项目的默认配置,一个是vue3项目的默认配置和手动配置

图片.png

一般我们都是手动配置的,进入手动配置选择项目所需的功能,按空格键选择或者取消,开发中一般用到的功能有Babel,Router,Vuex,css预处理器和eslint,typescript看情况选择

图片.png

选择完继续回车,来到了选择vue的版本,使用vue2开发就选vue2,使用vue3开发就选vue3

图片.png

选完版本之后来到下一步,希望将babel,eslint等配置放在专用配置文件还是package.json里

图片.png

选择完就来到了最后一步了,是否将刚才的选择保存为未来项目的预设,意思就是保存了下次创建项目的时候就可以使用这个预设,不用手动创建了

图片.png

创建完项目之后继续创建项目就可以看到我们保存过的预设了,就可以直接回车创建一个和预设一模一样的项目了,

图片.png

如果我们想将保存过的预设删除掉也是可以的,在我们c盘的user文件夹里有一个 .vuerc 文件,打开就可以看到我们保存过的预设了,直接选择想要删除的删掉保存就行了

图片.png

最后使用npm run serve就可以将项目运行起来了