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}