Vue3 项目创建

安装

1、安装node

vue 3需要node10以上版本

node官网下载地址以往的版本 | Node.js

2、安装vue/cli

如果已经全局安装过旧版本的vue-cli

npm uninstall vue-cli -g   //yarn global remove vue-cli

然后安装

npm install -g @vue/cli   //yarn global add @vue/cli

为什么要先卸载vue-cli，在安装vue/cli

如果是安装vue3以下版本的脚手架，命令npm install -g vue-cli@版本号
如果是安装3以上版本的脚手架，命令npm install -g @vue/cli@版本号

参考脚手架vue-cli和@vue/cli的搭建及区别

执行vue-v 查看版本

 

 创建项目

1、新建一个文件夹,然后右键选择打开命令行窗口
2、在命令窗口输入指令  vue create 项目名称    

选择初始化项目的配置：

第一步：Default是自动安装，在这里我选择最后一个手动安装，按下回车键进行选择

①default（vue3 babel，eslint）：默认设置（直接enter）非常适合快速创建一个新vue3项目的原型，没有带任何辅助功能的 npm包

② default（vue2 babel，eslint）：默认设置（直接enter）非常适合快速创建一个新vue2项目的原型，没有带任何辅助功能的 npm包

③ Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

第二步：配置自定义设置

     1 Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
     2 ( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
     3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
     4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
     5 ( ) Router // vue-router（vue路由）
     6 ( ) Vuex // vuex（vue的状态管理模式）
     7 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
     8 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
     9 ( ) Unit Testing // 单元测试（unit tests）
    10 ( ) E2E Testing // e2e（end to end） 测试

第三步：选择vue版本，我选择3.x

 第四步：Use history mode for router?
路由模式, 是否选择history模式，启用history模式，项目build之后，可能会出现打开页面空白的情况哦（待验证）。我这里先选择n

第五步：选择一种css 预处理器，我这里选择第一个

第六步： Where do you prefer placing config for Babel, ESLint, etc.?
Babel, PostCSS, ESLin等配置文件怎么存放, 是放到单独的配置文件中?还是package.json里? 这里方便配置清晰好看, 我选择每个配置单独文件。

第七步：Save this as a preset for future projects?

是否需要保存当前配置，在以后的项目中可快速构建? 保存后, 后续创建项目时可以直接选择该配置, 不需单独配置，我选择no

备注：

以上是我项目配置的选项，还有以下配置本次项目中没有遇到

 8 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）

Pick a linter / formatter config?
选择一种代码格式化检测工具

Pick additional lint features?
代码检查方式: 保存时检查 or 提交时检查; 我选择, 保存时检查，我选择第一个

  Pick a unit testing solution: (Use arrow keys)

  选择unit testing类型

  Cypress (Test in Chrome, Firefox, MS Edge, and Electron)

    Cypress 支持浏览器：Chrome、Firefox、Electron

 Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)

. Save this as a preset for future projects? (y/N) N 是否保存上述配置

 然后点击回车，会自动初始化项目

项目创建完成，目录结构如下：

 你也可以点击此处下载代码

https://gitee.com/pearwf/vue3-studay