项目的创建

vue3中​​vuecli​​​的包修改为​​@vue/cli​​​,vue创建的项目命令修改为​​vue create​​​,用来快速创建新项目。因为项目开发中需要vuecli,所以我们需要全局安装,下面中的​​-g​​​表示全局安装,install也可以简写为​​i​​​。安装完成后,我们可以通过​​vue --versioon​​​检查是否安装成功。除了npm安装外,我们也可以使用​​yarn​​​,需要注意的是,yarn的添加是使用​​add​​而不是install。

npm install -g @vue/cli;

创建项目命令后面跟的是项目名称,但是我们需要注意的是,项目名中不能有大写字母。使用cmd执行创建命名后,因为我已经工作一段时间了,所以我选择第三个手动项目配置,enter后第二个可以默认选择,然后选择​​preview​​​后,enter后,进入代码检验的选择,​​ESLint​​可以选择默认的。检测代码可以选择保存时检测。为了以后创建项目方便我们可以选择专门的配置文件中存放配置信息,这样以后直接选择这个配置就行。选择后输入这次配置的名字,然后enter后就会创建脚手架项目。创建成功后,会提示以下命令。将生成的ip复制到浏览器中,打开后就看到一个大的vue的logo,此时基础的项目就启动成功了。

cd demo
// 生成访问地址
npm run serve

如果想查看一些可选项,可以使用​​vue create --help​​​。选项说明中有忽略提示符以及安装依赖和git初始化等相关配置。前面我们创建成功的自定义脚手架配置如何删除,删除的方式就是在操作系统的用户目录中去找​​.vuerc​​​文件,然后将文件中的​​presets​​中的内容删除就行。

vue3中还可以使用图形页面去创建项目,在cmd中输入​​vue ui​​​就可以在浏览器上的图形界面去创建和管理项目以及配置插件和项目依赖等项目的基础设置。生成的项目中的各个文件夹都有不同的意思,介绍几个重要的文件说明,例如​​node_modules​​​表示项目依赖模块。​​public​​​不会被webpack编译处理。​​src​​​中的​​components​​​存放各种组件。​​main.js​​​加载公共组件或者插件。​​gitignore​​​需要忽略的文件或者文件夹。​​package.json​​​配置项目依赖的库。​​readme.md​​​项目的一些说明文件。​​App.vue​​表示项目的根组件。