vue3.0 环境搭建+新建项目

环境安装

npm安装：
1.安装最新版nodejs
2.win+R cmd
输入node -v，我这里安装的是v14.17.0

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 回车验证

只要是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
  选择项目版本
  

• Use class-style component syntax
  是否使⽤Class（类）风格装饰器, 即通过export default class Home extends Vue{} 创建Vue实例
  

• Pick a CSS pre-processor
  选择⼀种css 预处理器, 在这⾥我选择less
  

• Where do you prefer placing config for Babel, ESLint, etc.?
  选择配置文件保存在哪里，选package.json文件里或者新建有个vue.config.js文件
  

• Save this as a preset for future projects?
  是否将这次的配置设置为之后项目的预设模式
  

PS:
总结：

可能遇到的问题：
Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。
vue-cli3 之后创建的时候并不会自动创建 vue.config.js，因为这个是个可选项，所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。
开发者一般不需要再去知道 weboack 做了什么，所以没有暴露 webpack 的配置文件，但你依然可以创建 vue.config.js 去修改默认的 webpack。