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 to select, to toggle all, to invert selection)

检查项目所需的功能:(按选择，切换所有，反转选择）

( ) 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 to select, to toggle all, 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个人笔记 公众号

转载于:https://juejin.im/post/5c54fb23f265da2db2790a7e