关于vue-cli3.0脚手架搭建项目(前端小白)

开始之前安装的软件:

  • nodejs,下载地址:http://nodejs.cn/
  • git,下载地址:https://git-scm.com/downloads
    有了以上软件就可以更好的进行,接下来就可以开始搭建我们的项目了。

一、首先,我们就需要全局安装vue-cli,如果全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载,在进行安装,全局安装以后,如果我们需要创建其他项目,就不用在安装vue-cli。

npm install -g @vue/cli

二、创建项目

  1. vue create 搭建新项目
vue create vue-test

具体操作如下:

首先,会提示你选择一个preset(预设):

① 除最后两个,其他选项都是你此前保存的预设配置(如下图第一个“ my-default”是我之前保存的预设配置,如今便可以直接用了)

在这里插入图片描述

如果没有配置保存过,则只有以下两个选项:

② default(babel,eslint):默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的 npm包

③ Manually select features:自定义配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的 npm 包

关于vue-cli3.0脚手架搭建项目(前端小白)_第1张图片
手动选择需要添加的配置项:

? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
>( ) 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) 测试

选择完后直接enter,然后会提示你选择对应功能的具体工具包,选择自己擅长或者使用广泛的(方便遇到问题时百度),简介如下:

①是否使用history router:
这里按提示Y表示使用hietory路由模式,N表示hash路由模式

在这里插入图片描述

② css预处理器

主要为css解决浏览器兼容、简化CSS代码 等问题

这里自行选择使用哪一种

关于vue-cli3.0脚手架搭建项目(前端小白)_第2张图片

③ ESLint:

提供一个插件化的javascript代码检测工具,ESLint + Prettier //使用较多

关于vue-cli3.0脚手架搭建项目(前端小白)_第3张图片

④ 何时检测:

关于vue-cli3.0脚手架搭建项目(前端小白)_第4张图片

⑤ 单元测试 :

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai //mocha灵活,只提供简单的测试结构,如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest //安装配置简单,容易上手。内置Istanbul,可以查看到测试覆盖率,相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

⑥ 如何存放配置 :

关于vue-cli3.0脚手架搭建项目(前端小白)_第5张图片

⑦ 是否保存本次配置(y:记录本次配置,然后需要你起个名; n:不记录本次配置):

关于vue-cli3.0脚手架搭建项目(前端小白)_第6张图片

⑧ 搭建完成:

关于vue-cli3.0脚手架搭建项目(前端小白)_第7张图片
到这里,就算完成初步搭建了,当然这里安装也可以在 vue create cue-test选择时,按完enter,之后有提示,再按一次enter,搭建一个最初始的项目框架,再需要vue全家桶或者其他安装包再进行安装包也是一样的。

2、 vue ui,图形化界面创建项目,命令行中执行vue ui即可,稍等一会便会弹出界面,进行可视化创建项目。不细讲,复制一个链接在此 点击跳转查看

你可能感兴趣的:(vue)