小白必看,从0开始搭建vue项目

62 阅读2分钟

创建项目之前请先确定好,你已经安装了node、npm、vue cli、如果没有安装请自行查看官网进行安装。

安装完后我们可以开始进行项目的搭建。

1、进入一个项目需要存放的位置,创建项目

vue create project_name

image.png

2、安装配置选择

上述命令回车以后,会出现以下几个选项。

image.png

这里我们按上下箭头选择自定义配置,然后会出现一下多个选项

image.png 红色标注出有详细说明,空格键是选中,a是全选、i是反选。根据自己的需求选择需要安装的配置。

>( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。 
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试

image.png

这是我在本项目所选择的配置。然后继续回车,选择你所要用的vue版本。

image.png

继续回车,选择路由模式。

image.png

我这里选择n,路由模式history和hash的区别,建议自行百度。

选择css预处理器

image.png

我选择的是Sass/Scss(with dart-sass) 因为国内安装node-sass总会遇见各种各样的问题,很烦。。。

选择Eslint代码验证规则,根据自己需求

image.png

选择什么时候进行代码规则的检测

image.png

第一个是保存就检测,第二个是提交代码时检测,建议选择第一个。如果等到提交时再检测可能问题较多,很头疼。

选择如何存放配置

image.png 第一个是独立放置,第二个是放置在package.json中。

选择独立放置,会多出以下文件

image.png

是否保存当前配置

image.png

如果选择y 需要对当前配置进行命名,下次创建项目时可直接使用此配置。

然后回车等待项目创建。

3、创建成功

稍等一会,项目就创建成功!

image.png

根据提示进入项目目录,执行npm run serve项目就会启动,至此创建完成!