Vue3新建项目

2020-04-24 17:20:26 浏览数 (1)

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}

0 人点赞