环境安装

npm安装:

1.安装最新版nodejs

2.win+R cmd

输入node -v,我这里安装的是v14.17.0

vue3项目架构图 vue3.0项目_vue3项目架构图

cnpm安装:
3.安装淘宝镜像npm install -g cnpm registry=https://registry.npm.taobao.org

Vue安装:

4.继续安装vue脚手架cnpm i -g @vue/cli(删除之前老的脚手架工具 npm uninstall vue-cli -g )

5.安装完成后vue -V 回车验证

vue3项目架构图 vue3.0项目_vue3项目架构图_02


只要是v4.5+版本的脚手架就可以搭建vue3.0的项目了


进入正题:开始创建vue3.0项目!

1.创建项目 vue create projectname

项目名称要避开特殊名字如echarts、vue等,接下来就是配置选择,具体如下:

  • Please pick a preset

eslint):默认预设配置,会快速创建一个Vue3.0项目,提供了babel和eslint支持 Default ([Vue 2]
babel, eslint):默认预设配置,会快速创建一个Vue2.0项目,提供了babel和eslint支持 Manually
select features:手动配置项目,可根据项目的需要选择合适的选项,具备更多的选择性

  • Check the features needed for your project
    根据自己的需求添加配置项

Babel:使用Babel将源码进行转码(把ES6=>ES5)
TypeScript:使用TypeScript进行源码编写。使用TypeScript可以编写强类型JavaScript
Progressive Web App (PWA) Support:使用渐进式Web应用程序 Router:使用Vue路由
Vuex:使用Vuex状态管理器 CSS Pre-processors:CSS 预处理器(如:less、sass) Linter /
Formatter:使用代码风格检查和格式化(如:ESlint) Unit Testing:使用单元测试(unit tests) E2E
Testing:使用E2E(end to end)黑盒测试

  • Choose a version of Vue.js that you want to start the project with
    选择项目版本
  • vue3项目架构图 vue3.0项目_javascript_03

  • Use class-style component syntax
    是否使⽤Class(类)风格装饰器, 即通过export default class Home extends Vue{} 创建Vue实例
  • vue3项目架构图 vue3.0项目_vue3项目架构图_04

  • Pick a CSS pre-processor
    选择⼀种css 预处理器, 在这⾥我选择less
  • vue3项目架构图 vue3.0项目_vue.js_05

  • Where do you prefer placing config for Babel, ESLint, etc.?
    选择配置文件保存在哪里,选package.json文件里或者新建有个vue.config.js文件
  • vue3项目架构图 vue3.0项目_前端_06

  • Save this as a preset for future projects?
    是否将这次的配置设置为之后项目的预设模式
  • vue3项目架构图 vue3.0项目_前端_07

PS:

总结:

vue3项目架构图 vue3.0项目_javascript_08


可能遇到的问题:

Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。

vue-cli3 之后创建的时候并不会自动创建 vue.config.js,因为这个是个可选项,所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。

开发者一般不需要再去知道 weboack 做了什么,所以没有暴露 webpack 的配置文件,但你依然可以创建 vue.config.js 去修改默认的 webpack。