云社区 博客 博客详情

vue脚手架安装以及创建项目

SegmentFault思否 发表于 2020-10-20 23:47:52 2020-10-20
0
0

【摘要】 vue脚手架安装以及创建项目1.电脑系统 windows10 专业版2.在开发的过程中,我们会经常使用到 vue脚手架进行开发,现在来教大家如何安装脚手架,并安装指定的版本3.先卸载 vue脚手架 npm uninstall -g @vue/cli 全局卸载 vue脚手架4.现在安装 指定的版本 3 npm install -g @vue/cli@3 默认会安装 vue-cl...

vue脚手架安装以及创建项目

1.电脑系统 windows10 专业版
2.在开发的过程中,我们会经常使用到 vue脚手架进行开发,现在来教大家如何安装脚手架,并安装指定的版本
3.先卸载 vue脚手架 npm uninstall -g @vue/cli 全局卸载 vue脚手架
4.现在安装 指定的版本 3 npm install -g @vue/cli@3 默认会安装 vue-cli3的最高版本
5.vue-cli3.0创建方法的命令是不一样的,需要和vue-cli2.0进行区分,vue-cli3.0使用的命令是:

vue create 项目名称
  //当然也可以通过可视化工具进行创建 : cmd 然后 输入 vue ui 

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

? Please pick a preset: (Use arrow keys)
default (babel, eslint) // 默认选项
Manually select features // 手动选择功能

如果选择default则会直接创建项目,创建项目包括babeleslin这些工具,比如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
当我们在控制台输入上面命令之后稍等一会就会看到浏览器打开了一个新的页面,当然了,我们需要在电脑中找到我们的项目,导入进去。

//以下操纵 基本上 和上面是一样的!
本期的教程到了这里就结束啦!是不是很棒!很完美!让我们一起努力走向巅峰!

文章来源: segmentfault.com,作者:灰太狼的情与殇,版权归原作者所有,如需转载,请联系作者。

原文链接:segmentfault.com/a/1190000037529161

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:数据系统架构-2.元数据管理

下一篇:PHP 7:真实世界的应用开发——PHP 7 安装注意事项

评论 (0)


登录后可评论,请 登录注册

评论