搭建一个vue项目

最新推荐文章于 2024-07-15 14:11:16 发布
最新推荐文章于 2024-07-15 14:11:16 发布
阅读量217 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40758662/article/details/131411824
版权
文章指导读者如何检查Node.js和npm的版本，使用@vue/cli安装和验证Vue环境，解决在PowerShell中执行权限的问题，以及通过vuecreate命令创建Vue项目并启动本地服务器。重点介绍了vuecreate与vueinit的区别。
摘要由CSDN通过智能技术生成

准备：先检查环境

node -v

npm -v

 1.搭建vue环境

npm install -g @vue/cli

 2.检测vue环境是否安装成功

vue --version

我这里报错，此处为解决报错方法

① 在运行处搜索powershell，以管理员身份运行。

②输入命令

set-ExecutionPolicy RemoteSigned -Scope CurrentUser

 ③输入 A

 ④命令行继续输入命令，

 Get-ExecutionPolicy

看到这样显示，表示已经修改成功

 继续在vscode的终端输入vue --version，即可显示vue的版本号了。

3.创建vue项目

vue create <项目名称>

vue create命令解释

  1. 小黒窗中的vue create命令是由@vue/cli提供的。
  2. vue create 用来快速创建项目：会自动创建文件夹

vue create、vue ui、vue init区别：

  • 都是项目初始化指令
  • vue-cli版本的不同
  • vue create 是vue-cli3.x的初始化方式
  • vue init 是vue-cli2.x的初始化方式

然后cd到项目目录下，npm run serve项目就运行起来了

 

那颗星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
创建一个vue项目
upStar1的博客
05-09 260
学vue这么长时间，除了老师最开始带我建了一个项目，后来的项目都是直接用的公司的再也没建过，今天才发现自己不会建项目。 搭建环境就不赘述了。 1.先cmd，进入项目的目录 2.新建项目 vue create + 项目名称 比如我这边是 vue create mydemo ，当然因为我不是vuecli3所以这个命令没用。 用之前的新建命令就可以 vue init webpack + 项目名称 3.这里就建好了 4.cd mydemo会进入项目 npm run dev启...
MacOS 搭建一个vue项目(完整步骤)
anndy_的专栏
10-15 8383
搭建一个Vue项目一、安装node环境二、搭建vue项目环境1、全局安装vue-cli2、检查是否安装成功3、创建一个基于 webpack 模板的新项目4、安装依赖5、启动项目三、vue项目目录讲解四、开始我们的第一个vue项目1、在components目录下新建一个views目录，里面写我们的vue组件2、开始我们的第一个组件3、讲讲父子组件4、使用路由搭建单页应用5、如何用less写样式 一、安装node环境 1、下载地址为：https://nodejs.org/en/ 2、检查是否安装成功：如果输出版
用vue创建一个项目
以后的博客
05-19 1089
要先安装node.js  用node -v 和npm -v 查看是否安装完整 然后安装淘宝镜像cnpm来代替npm 加快创建项目的速度 cnpm -v查看是否安装完整 #最新稳定版本 1·npm install vue  如果使用淘宝镜像安装就输入命令行      cnpm install -g vue-cli进行安装， 如果没有安装淘宝镜像依旧用 npm install -g vue-
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
最新发布
weixin_73582152的博客
07-15 1086
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
创建VUE项目
weixin_30540691的博客
09-07 68
前提需要下载node.js，并安装 一：打开CMD； 二：选择项目要创建的路径（这里我选择的是创建在桌面：desktop） 三：如果安装了node.js，还要安装vue-cli，webpack，全部-g全局安装即可。（npm install vue-cli..等） 四：如果已经安装好了这些东东，下面就可以创建vue项目了（vue init webpack d...
vscode 搭建一个vue项目.doc
08-07
本资源将指导您如何在 VSCode 中搭建一个 Vue 项目，从安装依赖项到项目的创建和发布。 一、安装依赖项 1. 安装 Node.js：Node.js 是一个 JavaScript 运行环境，需要在本地安装。 2. 安装 Vue CLI：Vue CLI 是一个...
手把手教你从0开始搭建一个vue项目
06-22
本课程会完全脱离脚手架，站在前端工程化的角度，利用webpack手把手教你从0开始搭建一个企业级的vue项目。 课程将会涉及到的知识点有： 前端工程化搭建webpack配置、webpack-chain使用引入babel转换最新的es语法引入...
如何搭建一个vue项目(完整步骤)
m0_67392661的博客
06-22 3564
查看版本的两种方式 出现版本号则说明安装成功（最新的以官网为准） 这里注意：安装vue-cli对node.js的版本是有要求的 装的两种方式：输入cmd命令 查看安装的版本（显示版本号说明安装成功） 如果你原来有版本或者版本比较低，可以升级...
创建Vue项目
qq_44274968的博客
05-31 1128
因为创建一个Vue项目(并且在本地作为一个前端服务器运行起来 ), 需要很多第三方的包的支持(至少上百个包), 我们没有办法一个一个下载这些包(因为包需要 依赖另一个包, 并且依赖关系有版本要求), 所以我们前端就开发了一个工具叫npm, 这个工具的原理就是, 大家都把包存储到它的服务器上(有成千上万), 当我们需要的时候, 可以使用这个npm工具帮我们从它的服务器上下载正确的以及对应的包到我们本地,以供我们使用.// ---------------项目创建完成--------------------
创建vue项目
qq_40975034的博客
11-28 334
1. 在你先创建项目的目录下按shift+鼠标右键，选择在此处打卡命令窗口。 2. 开始创建项目  输入命令 vue init webpack 你的项目名称    然后回车 输入项目名 输入项目描述 输入项目作者 之后的如果让你判断（y/n） 全部y ，如果没有这个选项就直接回车  出现如下则项目创建成功 启动项目 进入项目文件夹下 在此处打卡命令窗口 输入npm run...
简单搭建一个vue项目，测试post请求
05-21
好的，以下是简单的步骤： 1. 确认已安装Node.js和npm，可在命令行工具中输入以下命令检查版本号： ``` node -v npm -v ``` 2. 安装Vue CLI，可在命令行工具中输入以下命令： ``` npm install -g @vue/cli ``` 3. 创建一个新的Vue项目，在命令行工具中输入以下命令： ``` vue create my-project ``` 4. 进入项目目录，并安装axios，可在命令行工具中输入以下命令： ``` cd my-project npm install axios ``` 5. 在src目录下创建一个api.js文件，用于封装post请求： ``` import axios from 'axios' const service = axios.create({ baseURL: 'http://localhost:3000', // 填写后端服务器地址 timeout: 10000 // 请求超时时间 }) export function postRequest(url, params) { return service({ method: 'post', url: url, data: params }) } ``` 6. 在组件中使用post请求，示例代码如下： ``` <template> <div> <button @click="postData">发送POST请求</button> </div> </template> <script> import { postRequest } from '@/api.js' export default { methods: { async postData() { try { const res = await postRequest('/api/login', { username: 'test', password: '123456' }) console.log(res.data) } catch (error) { console.log(error) } } } } </script> ``` 7. 运行项目，在命令行工具中输入以下命令： ``` npm run serve ``` 8. 在浏览器中访问http://localhost:8080，点击按钮即可发送post请求，并在控制台中查看响应结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值