使用vscode创建vue3项目【真保姆级教程】

注:node啥的提前安装好,就不在这里演示了

1、创建空文件夹

创建一个空文件夹用来存放vue项目

2、vscode打开

打开文件夹

选择刚刚创建的空文件夹

3、创建项目

终端控制台输入命令,注意项目名不能包含大写,可以有下划线

vue create oasystem
# vue create "项目名"

此时有人不知道怎么打开控制台(不会吧不会吧,难道只有我不知道)

将鼠标放在这个位置,当鼠标从输入变成拖动后,向上拖,控制台就打开啦

输入刚才的命令后可能会报错(因为我报错了),报错信息如下

解决办法:

安装Vue CLI

npm install -g @vue/cli

如下图安装成功,重新执行命令

此时发现,又报错了,报错信息如下

错误是因为 PowerShell 的执行策略限制了脚本的运行。可以通过更改执行策略来解决这个问题

搜索PowerShell,右键点击 PowerShell 图标,选择“以管理员身份运行”。

打开后输入下面的命令

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

现在再回到vscode执行创建命令,发现终于不报错了

? Please pick a preset:
  Default ([Vue 3] babel, eslint)
> Default ([Vue 2] babel, eslint)
  Manually select features

此时使用小键盘的箭头上下移动选择 Default ([Vue 3] babel, eslint),然后按回车键。

等待项目创建,成功效果如下

项目创建完成后,进入项目目录

cd oasystem

使用以下命令启动

npm run serve

4、访问测试

打开浏览器,访问 http://localhost:8080,你应该会看到 Vue 3 项目的默认页面。

好了,现在可以做一些其他操作了

### 如何在 VS Code 中创建 Vue 2 项目 要在 Visual Studio Code (VS Code) 中创建一个基于 Vue 2 的项目,可以按照以下方法操作: #### 准备工作 确保已安装 Node.js 和 npm/ yarn。可以通过运行以下命令来验证版本: ```bash node -v && npm -v ``` 如果尚未安装 `vue-cli` 工具,则需要通过 npm 安装它: ```bash npm install -g @vue/cli ``` #### 创建 Vue 2 项目 使用 `vue create` 命令初始化一个新的 Vue 项目,并指定 Vue 2 版本。 1. 打开终端并输入以下命令以启动交互式配置向导: ```bash vue create my-vue2-project ``` 2. 在提示中选择手动配置选项(Manually select features),以便自定义项目的功能集。 3. 当被询问要使用Vue 版本时,选择 **Vue 2**[^1]。 4. 继续完成其他设置,例如路由支持、Vuex 状态管理以及单元测试等功能的选择。 5. 初始化完成后进入新目录: ```bash cd my-vue2-project ``` #### 配置开发环境 打开刚创建好的项目文件夹于 VS Code 编辑器内: ```bash code . ``` 接下来,在 `resources/js/app.js` 文件中确认基础框架是否正确加载了 Vue Router 及组件绑定逻辑[^2]。以下是典型的基础结构代码片段: ```javascript require(&#39;./bootstrap&#39;); window.Vue = require(&#39;vue&#39;); import VueRouter from &#39;vue-router&#39;; import App from &#39;./App.vue&#39;; import routes from &#39;./routes&#39;; Vue.use(VueRouter); const router = new VueRouter({ mode: &#39;history&#39;, routes, }); new Vue({ el: &#39;#app&#39;, router, render: h => h(App), }); ``` 对于前端界面部分,需编辑主要入口组件 `App.vue` 来加入导航链接[^3]: ```html <template> <div id="app"> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </nav> <router-view /> </div> </template> <script> export default { name: &#39;App&#39; }; </script> ``` 最后,为了进一步扩展应用的功能性和用户体验优化,可考虑引入额外插件或者工具链如 Vuex 或者 Electron 支持。 #### 运行与调试 执行下列指令开启本地服务器用于实时预览效果: ```bash npm run serve ``` 访问浏览器地址栏显示的 URL 地址即可查看正在构建中的应用程序实例。 --- ###
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值