利用Vue-cli3简单快速搭建前端项目架构

安装

如果在电脑上已经安装了vue-cli2.0如果想要把其替换成vue-cli3.0的话需要先卸载原有vue-cli2.0的版本。

npm uninstall vue-cli -g
卸载完成之后就直接安装vue-cli3.0就好了

npm install -g @vue/cli
检测是否安装成功

vue --version
通过上面的步骤就可完成vue-cli3.0的安装。

创建项目

在使用vue-cli2.0创建项目的时候，直接使用vue webpack init 项目名称这样工具就可以轻松创建一个项目，vue-cli3.0也是一样的，但是既然版本不同了，那么自然而然的会有一些新的选项。当然安装vue-cli3.0之后还是可以使用vue-cli2.0脚手架的，创建项目方法还是一样的。

vue-cli3.0创建方法的命令是不一样的，需要和vue-cli2.0进行区分，vue-cli3.0使用的命令是：

vue create 项目名称
笔者觉得这样才更加的像一个脚手架，在通过命令创建项目的时候不会显得那么的繁琐。

输入完命令以后在窗口中可以看到有关项目的一些配置选项。

? Please pick a preset: (Use arrow keys)
default (babel, eslint) // 默认选项
Manually select features // 手动选择功能
如果选择default则会直接创建项目，创建项目包括babel\eslin这些工具，比如Router/Vuex等其他依赖需要自己手动安装。

如果选择Manually select features(手动安装)则会进入下一步选项：（这里推荐大家进行手动配置）

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection)

( ) Babel // 代码编译
( ) TypeScript // ts
( ) Progressive Web App (PWA) Support // 支持渐进式网页应用程序
( ) Router // vue路由
( ) Vuex // 状态管理模式
( ) CSS Pre-processors // css预处理
( ) Linter / Formatter // 代码风格、格式校验
( ) Unit Testing // 单元测试
( ) E2E Testing // 端对端测试
一般项目开发只需要选择Babel、Router、Vuex就足够了。

下面简单说一下选择不同的配置项会出现的不同的情况：

TypeScript
Use class-style component syntax?
这里询问的是是否使用class风格的组件语法，如果在项目中想要保持使用TypeScript的class风格的话，建议大家选择y。

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
使用Babel与TypeScript一起用于自动检测的填充?这里一定要选择y

Router
Use history mode for router? (Requires proper server setup for index fallback in production)
路由是否使用history模式？如果项目中存在要求就使用history(即:y)，但是一般还是推荐大家使用hash模式，毕竟history模式需要依赖运维。

CSS Pre-processors css
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
选择一种CSS预处理类型，这个需要根据各个项目的要求使用那种css编译处理了。

Linter / Formatter
? Pick a linter / formatter config: (Use arrow keys)

ESLint with error prevention only // 只进行报错提醒
ESLint + Airbnb config // 不严谨模式
ESLint + Standard config // 正常模式
ESLint + Prettier // 严格模式
TSLint (deprecated) // TypeScript格式验证工具
TSLint只有在选择TypeScript时才会存在。

? Pick additional lint features: (Press to select, to toggle all, to invert selection)

(*) Lint on save // 保存时检测
( ) Lint and fix on commit // 修复和提交时检测
选择校验时机，一般都会选择保存时校验，好及时做出调整，如果代码风格和ESLint校验风格差不多的话，或者比较自信比较帅的情况下，可以考虑选择提交时校验。唯唯诺诺的我，选择了第一项。

Unit Testing
? Pick a unit testing solution: (Use arrow keys)

Mocha + Chai
Jest
选择单元测试解决方案，普遍用到最多的时Mocha + chai，这里就不多说了。

E2E Testing E2E（End To End）
? Pick a E2E testing solution: (Use arrow keys)

Cypress (Chrome only)
Nightwatch (WebDriver-based)
选择端对端测试的类型。

额外选项
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

In dedicated config files // 存放在专用配置文件中
In package.json // 存放在package.json中
选择Babel,PostCSS, ESLint等自定义配置的存放位置。这里建议大家选择第一个，

Save this as a preset for future projects? (y/N)
是否保存当前选择的配置项，如果当前配置是经常用到的配置，建议选择y存储一下当前配置项。如果只是临时使用的话就不需要存储了，根据自己情况而定啦。

选择n之后则会直接开始创建项目了，选择y之后则会输入一个存储当前配置项的名称:

? Save preset as:
下次再创建项目的时候就会看到，自己所存储的这个名字啦。

项目依赖
Vue-cli3.0可以使用npm安装所需要的依赖，出了这个他还提供了一个其他的方法vue add方法。

// npm
npm install --save axios
// vue
vue add axioa
既然可以使用npm安装为什么还要使用vue add安装呢？官方文档中是这样说明：

Vue CLI使用了一套基于插件的架构。如果你查阅一个新创建项目的package.json，就会发现依赖都是以@vue/cli-plugin-开头的。插件可以修改webpack的内部配置，也可以向vue-cli-service注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。

基于插件的架构使得 Vue CLI 灵活且可扩展。

通过上面的说明可以看出vue-cli想要让脚手架工具变的更加的灵活，所以为我们添加了vue-cli的插件，这些插件在安装时会修改webpack里面配置(不是所有插件)，而且还会在现有项目里面添加一些已经写好的范例文件(当然也是个别)，但是有一点需要注意的是，这些命令会更改现有项目里面的内容。尤其是在使用vue add router或是vue add vuex效果还是蛮明显的。

然而使用npm install来安装的项目根本就不会帮我们做这些事情。虽然现在知道了vue官方提供了很多插件，但是应该从哪里看到呢？人性化的vue怎么可能会忽略这个问题呢？

vue ui
当我们在控制台输入上面命令之后稍等一会就会看到浏览器打开了一个新的页面，当然了，我们需要在电脑中找到我们的项目，导入进去。

看到这个页面后点击导入，然后会看到一些文件夹，具有vue的项目会做出特殊的标识，找到对应项目点击进去。

利用Vue-cli3简单快速搭建前端项目架构相关推荐

利用宝塔面板的Python项目管理器快速搭建CuteOne项目
前言:一般的Linux系统默认安装了python2.x,当运行需要python3.x的项目几乎都会报错,要更换python的版本挺麻烦的,可能会因为一个小步骤没搞好,缺少库之类的,或者没配置好影响py ...
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目源码(欢迎star): 前端项目代码后端项目代码系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
快速搭建Springboot项目的两种方式！！
大家好,我是雄雄,欢迎关注微信公众号[雄雄的小课堂]. 前言 Springboot的特点就是简单.快速和方便,使用idea不到一分钟就可以快速搭建springboot项目,并且,在这里,你不用写spr ...
创建react项目 Linux,idea2018 快速搭建react项目指南
react与angular和vue是截止2018年为止主流的前端框架.对于一些新手来说,想快速入门react,应该是搭建一个react最初的模板项目,然后在项目中添加一些自己喜欢的组件作为练手..今天 ...
node.js require 自动执行脚本并生成html,利用node.js实现自动生成前端项目组件的方法详解...
本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景写这个小脚本的初衷是,项目本身添加一个组件太 ...
test.php创建,基于phpstudy简单快速搭建一个php程序
原标题:基于phpstudy简单快速搭建一个php程序人人都是程序员,希望在零碎的阅读时间里,给您一些技术提升. 1 安装phpstudy 通过以下链接download.csdn.net/downl ...
arduino控制小车转向_利用XECU和激光雷达快速搭建入门级的自动驾驶小车
利用XECU和激光雷达快速搭建入门级的自动驾驶小车 1 简介如果关注过我们之前的推文和视频演示,相信大家对我们的XECU应该已经很熟悉了.那么今天就向大家介绍一下,如何利用我们的XECU和激光雷达快 ...
快速搭建SSM项目【最全教程】~令狐小哥版
快速搭建SSM项目[最全教程]~令狐小哥版文章目录快速搭建SSM项目[最全教程]~令狐小哥版一.创建项目二.集成spring依赖三.创建applicationContext.xml文件四. ...
php开发架构设计,基于php的快速搭建SPA开发架构的框架设计与开发
程序员之家基于 P h p 的快速搭建 S PA 开发架构的框架设计与开发 ?叶松鑫马灏辉何子安彭吉琪黄钰冰 (佛山科学技术学院电子信息工程学院广东佛山 528 ...

利用Vue-cli3简单快速搭建前端项目架构

安装

创建项目

利用Vue-cli3简单快速搭建前端项目架构相关推荐

最新文章

热门文章