Vue3新建项目

Vue3.x已经出了很久了,只是现在业务没有新工程,所以还是一直在vue2.x上工作,为了不被落下,理了理vue3.x新建项目的过程。

node install -g n专门用来管理node版本,更新到最新稳定版本

npm install -g @vue/cli安装vuecli3

npm install -g @vue/cli-init使用2.x版本

npm install -g @vue/cli-service-global扩展,可单独快速启动一个服务,只需要一个.vue文件,用于开发一个库、组件、demo非常有用

vue serve App.vue启动服务

vue build App.vue打包出生产环境的包并用来部署

vue create project-name创建项目

选择模板default(默认配置)和Manually select features(手动配置)

默认配置只有babel和eslint其他的都要自己另外再配置,

空格键是选中与取消,A键是全选

Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

检查项目所需的功能:(按<space>选择,<a>切换所有,<i>反转选择)

( ) TypeScript 支持使用 TypeScript 书写源码

( ) Progressive Web App (PWA) SupportPWA 支持

( ) Router 支持 vue-router

( ) Vuex支持 vuex

( ) CSS Pre-processors 支持 CSS 预处理器。

( ) Linter / Formatter支持代码风格检查和格式化。

( ) Unit Testing测试。

( ) E2E Testing测试

Use class-style component syntax? 是否使用class风格的组件语法?

Use Babel alongside TypeScript for auto-detected polyfills? 是否使用babel做转义?

Use history mode for router? (Requires proper server setup for index fallback in production)

路由使用history模式?(在生产环境中需要适当的服务器设置)

这里我建议选No,这样打包出来丢到服务器上可以直接使用了,后期要用的话,也可以自己再开起来。选yes的话需要服务器那边再进行设置。

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

选择CSS预处理器(默认支持PostCSS,Autoprefixer和CSS模块):

SCSS/SASS

LESS

Stylus

ESLint with error prevention only

ESLint + Airbnb config

ESLint + Standard config

ESLint + Prettier

选择Eslint代码验证规则:可以百度eslint 三大通用规则

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

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)

( ) Lint on save 保存就检测

( ) Lint and fix on commit fix和commit时候检查

建议选保存就检测,等到commit的时候,问题就应该很多了

最后一个选择测试的,确认就好了,因为还从来没用过

把babel,postcss,eslint这些配置文件放哪:

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)

In dedicated config files 独立文件放置

In package.json 放package.json里

建议选择独立放置,让package.json干净些

是否保存配置:

Save this as a preset for future projects? (Y/n)

是否记录一下以便下次继续使用这套配置

选保存之后,会让你写一个配置的名字:

Save preset as: name

然后你下次进入配置可以直接使用你这次的配置了

建议不要保存,这几个步骤没什么难度

好了之后可以看见目录改动还是蛮大的,vue3越来越靠近简洁。

vue3没有了那些配置文件,所以要在根目录新建vue.config.js

然后根据需要进行配置,都是按照webpack标准来配置的,这边简单配置了两个:

devServer: { host: 'localhost', // can be overwritten by process.env.HOST port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined open: true}

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 发布vue组件npm包

    其实很早之前就想尝试着写一写vue组件然后发布npm包,这次借着公司开发新项目,于是封装了一个Toast组件。

    wade
  • vue一些笔记20200403

    你可以只用做模板引擎,或者加上vue提供的路由,或者加上全局状态管理vuex,或者直接使用vue-cli直接搭建项目。你可以在现有程序使用vue,也可以用vue...

    wade
  • vue一些笔记20200603

    尤雨溪在知乎回答了,区分 actions 和 mutations 并不是为了解决竞态问题,vuex 真正限制你的只有 mutation 必须是同步的这一点,只是...

    wade
  • 推荐 8 个漂亮实用的 vue.js 进度条组件

    为大家精心挑选了 8 个漂亮的 Progress Bars 组件,并附上 GitHub 链接和 vue.js 代码示例,以及Vue3 快速深入全攻略。

    winty
  • IDEA 配置 Vue 支持

    似水的流年
  • 【译】如何把你的网页应用转化成PDF

    当我们把网页应用转化成 PDF 的时候有着各式各样的方法。在下面这篇文章来说,Rachel Andrew 通过她自己使用市面上各种工具的经验来帮助我们找到最合适...

    腾讯IVWEB团队
  • Top 5 Google Cloud Tools for Application Development

    Top Google Cloud tools for web application development. Google gives a wide scop...

    用户4822892
  • 算出实体箱子之间可以存多少水

    出题 ? 下午,群里面有同学出了一个简单的算法题,意思是一个房间内,有多个1立方米的箱子,多个箱子可以垂直落在一起,问:剩下的空间可以存多少立方的水(如图)。 ...

    春哥大魔王
  • 第三十八章:基于SpringBoot架构使用Profile完成打包环境分离

    恒宇少年
  • 事务性包管理器 GNU Guix 1.0.0 正式发布

    2012 年宣布的 GNU Guix 包管理器项目正式释出了 1.0.0 版本。在过去七年中,260 名开发者递交了超过 4 万个 commits,此外还有文档...

    Debian社区

扫码关注云+社区

领取腾讯云代金券