前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue3新建项目

Vue3新建项目

作者头像
wade
发布2020-04-24 17:20:26
1.2K0
发布2020-04-24 17:20:26
举报
文章被收录于专栏:coding个人笔记coding个人笔记

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}

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-11-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档