vue3创建流程备份1

博客记录了Vue项目初始化时的一系列配置选择,包括Vue版本选3.x预览版,使用类风格组件语法,搭配Babel和TypeScript,CSS预处理器选Stylus,代码检查器选Prettier,单元测试方案选Jest等内容。

? Please pick a preset: Manually select features

? Check the features needed for your project: Choose Vue version, Babel, TS, Rou

ter, Vuex, CSS Pre-processors, Linter, Unit

? Choose a version of Vue.js that you want to start the project with 3.x (Previe

w)

? Use class-style component syntax? Yes

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi

lls, transpiling JSX)? Yes

? Use history mode for router? (Requires proper server setup for index fallback

in production) No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported

by default): Stylus

? Pick a linter / formatter config: Prettier

? Pick additional lint features: Lint on save, Lint and fix on commit

? Pick a unit testing solution: Jest

? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi

g files

? Save this as a preset for future projects? (y/N) n

### Vue3 项目创建及配置教程 Vue 是一种流行的 JavaScript 前端框架,其 MVVM 架构模式使得开发者可以更高效地构建复杂的用户界面[^2]。以下是关于如何通过 Vue CLI 工具来创建并配置 Vue3 项目的详细说明。 #### 安装 Node.js 和 npm 在开始之前,确保已安装最新版本的 Node.js 和 npm。可以通过运行以下命令验证: ```bash node -v && npm -v ``` 如果未安装,则需前往 [Node.js官网](https://nodejs.org/) 下载并完成安装。 #### 安装 Vue CLI Vue CLI 是官方提供的脚手架工具,能够快速初始化一个新的 Vue 项目。执行如下命令进行全局安装: ```bash npm install -g @vue/cli ``` 确认安装成功后,可通过 `vue --version` 查看当前使用的 Vue CLI 版本号[^1]。 #### 创建新的 Vue3 项目 使用 Vue CLI 初始化新项目时,推荐选择手动配置选项以便自定义功能模块。具体操作流程如下所示: ```bash vue create my-vue3-project ``` 当提示询问是否启用手动选择特性时,请键入 **Y** 并回车继续设置过程。随后可以根据需求勾选必要的插件支持(如 TypeScript、Router 或 Vuex 等)。最后等待脚手架自动完成依赖包下载与文件结构生成即可[^3]。 #### 配置开发环境 对于 VSCode 用户来说,在新建好工程目录之后还需要额外调整一些权限参数才能顺利启动调试服务。比如针对 PowerShell 提示受限策略错误的情况,先运行管理员身份打开终端窗口再输入这条指令解除限制: ```powershell Set-ExecutionPolicy RemoteSigned -Scope CurrentUser ``` 接着切换到目标路径下依次执行下列两条语句分别开启本地服务器以及查看实时更新效果: ```bash cd my-vue3-project npm run serve ``` 此时浏览器会自动跳转至默认地址展示初始页面布局。 --- ### 注意事项 为了提高编码效率建议提前熟悉常用快捷方式;另外记得定期备份重要数据以防意外丢失! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值