vue3项目初始化配置流程(含注释)
一、 安装Vue脚手架
1、先安装node
安装包可以去官网下载，
在cmd窗口输入：node -v 命令，如果出现相应的版本号，则说明安装成功
npm install -g @vue/cli # 或者 yarn global add @vue/cli 3、安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org 4、查看vue版本
vue --version # 或 vue -v 二、命令行创建
1、vue-cli方式创建
vue create vue3-demo 2、vite创建
# npm创建 npm create @vitejs/app test_demo # yarn创建 yarn create @vitejs/app test_demo 三、示例——vue-cli方式创建
1、
- 绿色方框里的内容是说我的vue版本需要升级，可以使用
npm i -g @vue/cli命令进行操作
其他人在输入 vue create 项目名后，如果出现这样一条语句：
Your connection to the default yarn registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n) # y 意思是你不能科学上网，建议你使用过淘宝源，这时候需要选择Y，也就是使用淘宝源进行创建。如果你已经配置过淘宝源则不会显示这个选项。
2、
? Please pick a preset: (Use arrow keys) # 请选择预选项 > Default ([Vue 2] babel, eslint) # 使用Vue2默认模板进行创建 Default (Vue 3) ([Vue 3] babel, eslint) # 使用Vue3模板进行创建 Manually select features # 手动选择（自定义） 这个时候就要看实际需要了，不过相比较Vue2来说，Vue3对于TypeScript的支持更加友好，现在越来越多的项目也更偏向于Vue3开发。
我个人更喜欢使用Vue3。示例是选择第三项：手动选择。会出现很多可供选择的选项让你自定义选择。（如果这时候的你没有上面的三个选项，说明Vue-Cli是旧版本，需要更新）
3、
释义
? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Choose Vue version # 选择Vue版本 (*) Babel # javascript转译器 ( ) TypeScript # 使用 TypeScript 书写源码 ( ) Progressive Web App (PWA) Support # 渐进式WEB应用 ( ) Router # 使用vue-router ( ) Vuex # 使用vuex ( ) CSS Pre-processors # 使用css预处理器 (*) Linter / Formatter # 代码规范标准 ( ) Unit Testing # 单元测试 ( ) E2E Testing # e2e测试 4、
释义
? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 2.x # 选择Vue2 > 3.x # 选择Vue3 示例选择的是 3.x，回车进入下一层：
5、
释义
? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x ? Use class-style component syntax? (y/N) # 是否使用 class-style，目前基本上用不到，所以选择N 选择了TS之后会询问，是否使用Class的语法风格定义组件（React中的定义方式）;回车下一步
6、
意思是：是否使用TypeScript和Babel的形式编译 JSX
注：
TypeScript 本身就有编译功能，默认会把 JavaScript 代码转换为 ECMAScript 3 版本兼容的代码
如果你需要现代模式、自动检测 polyfill、转换 JSX 语法等功能，则建议开启这个选项
当选择以后，TypeScript 本身只会把代码转为 ESNext，也就是最新版的 ECMAScript 规范
然后由 Babel 把 ECMAScript 转换为低版本 JavaScript，例如 ECMAScript 5，以及自动检测 polyfill、转换 JSX 等功能
说白了就是让 TypeScript 转换和 Babel 转换相结合起来一起使用
7、
意思是：是不是用history模式来创建路由，示例选择的是hash模式
注：
8、
一般选择第一个或者第三个
释义
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) > Sass/SCSS (with dart-sass) # 保存后编译 Sass/SCSS (with node-sass) # 实时编译 Less Stylus 9、
选择代码格式化检测，示例是选择最后一个
释义
? Pick a linter / formatter config: ESLint with error prevention only # 只进行报错提醒 ESLint + Airbnb config # 不严谨模式 ESLint + Standard config # 正常模式 ESLint + Prettier # 严格模式 > TSLint (deprecated) # typeScrite格式校验工具 10、
代码检查方式是-保存检查
11、
文件配置，我选择配置在独立的文件中
12、
保存上述配置，保存后下一次可直接根据上述配置生成项目，也可以选择不保存
13、按下回车，等待下载完成即可
13.1、
如果下载完成后，cmd窗口出现报错 ：
这是因为少安装了vue-template-compiler模块
解决方法：
# 直接打开项目，在终端里运行安装即可 npm install vue-template-compiler # 或者 全局安装 npm install vue-template-compiler -g 13.2、
报错内容
error:0C:digital envelope routines::unsupported 原因：
node v17中的OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响。在node v17以前一些可以正常运行的的应用程序,但是在 V17 版本可能会抛出以下异常:
解决办法：
命令终端运行以下代码
export NODE_OPTIONS=--openssl-legacy-provider 14、然后，运行启动项目
# 启动示例项目 npm run serve 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10788.html