创建一个Vue工程错误及坑

创建教程

打开window powerShell

在这里插入图片描述

创建项目

在这里插入图片描述
在这里插入图片描述
说明(本案例选择无默认设置,可用enter键进行选定)

 #默认vue2,内置一些vue2设置
 Default ([Vue 2] babel, eslint)
 #默认vue3,内置一些vue3设置
 Default (Vue 3) ([Vue 3] babel, eslint)
 #无默认设置
 Manually select features

在这里插入图片描述
说明(可使用空格进行选择)

>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

本案例选择(enter键结束选择)
在这里插入图片描述

在这里插入图片描述

报错信息描述
在这里插入图片描述

启动命令

 $ cd yeb
 $ npm run serve

解决方法

改变执行策略

PS E:\3.0itemstudy\yun_office_front>  set-executionpolicy remotesigned

执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险,如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y](Y)  [A] 全是(A)  [N](N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): Y
PS E:\3.0itemstudy\yun_office_front> `
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一份基于Vue3和TypeScript的工程实例: 1. 安装Vue CLI 首先,你需要安装Vue CLI,这可以通过以下命令完成: ``` npm install -g @vue/cli ``` 2. 创建Vue项目 创建一个新的Vue项目,使用以下命令: ``` vue create my-project --default --inlinePreset '{"useConfigFiles":true,"plugins":{"@vue/cli-plugin-typescript":{}}}' ``` 这将创建一个基于TypeScript的Vue项目。 3. 安装依赖 进入项目文件夹,然后安装必要的依赖: ``` cd my-project npm install ``` 4. 配置VSCode 在VSCode中打开项目文件夹,然后安装以下插件: - Vetur - ESLint - Prettier 然后,在项目根目录下创建一个`.vscode`文件夹,并在其中创建一个`settings.json`文件,将以下内容添加到文件中: ``` { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnSave": true, "vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": true, "semi": false } }, "vetur.validation.template": false } ``` 这将启用自动修复ESLint错误和自动格式化代码。 5. 创建组件 在`src`文件夹下创建一个名为`components`的文件夹,并在其中创建一个名为`HelloWorld.vue`的文件,将以下内容添加到文件中: ```vue <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'HelloWorld', props: { msg: String } }) </script> <style scoped> h1 { font-weight: bold; } </style> ``` 这将创建一个包含一个`msg`属性的Vue组件。 6. 在App.vue中使用组件 在`src`文件夹下打开`App.vue`文件,并将以下内容添加到`template`标签中: ```vue <template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" /> </div> </template> ``` 这将使用`HelloWorld`组件并传递一个名为`msg`的属性。 7. 运行项目 最后,使用以下命令运行项目: ``` npm run serve ``` 打开浏览,访问`http://localhost:8080`,你应该可以看到一个包含欢迎消息的页面。 这就是基于Vue3和TypeScript的工程实例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值