Vue新建项目

最新推荐文章于 2024-08-03 17:57:20 发布
最新推荐文章于 2024-08-03 17:57:20 发布
阅读量245 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ZXQZXP/article/details/125655325
版权

文章目录

前言

开发使用环境：

vscode
node.js

创建项目

1.在电脑上初始化脚手架

 npm install vue-cli -g

2.检查是否安装可以使用

vue list

此处可能出现错误，如果出错请查看下面的错误处理(1,2,3)

安装成功可以使用的话会提示
在这里插入图片描述

3. 创建项目

 vue init webpack 项目的名字

请注意在哪里输入的命令，就会在哪个位置下的目录创建项目
此处可能出现错误，如果出错请查看下面的错误处理(4)
下一步

在这里插入图片描述

4.安装依赖并运行

进入到你建立的项目 cd xxx

npm install 安装依赖

npm run dev 运行项目

出现这个页面证明vue初始化项目成功
在这里插入图片描述

错误处理

1 无法读取vue

在这里插入图片描述
执行vue list 可能出现
原因：无法读取vue

处理方式

第一种.vue-cli -g没有安装，再次安装
第二种. 环境变量没有配置，无法读取
找到自己电脑上的有着vue.cmd
在这里插入图片描述

然后在环境变量里面添加上这个地址，类似这样
在这里插入图片描述
至此 这个问题解决

2 .vue无法加载文件 D:\node\node_global\vue.ps1

在这里插入图片描述
造成原因
本机禁止运行脚本

处理方式

打开限制
在这里插入图片描述
获取本地shell当前执行策略
Restricted代表静止，修改为允许即可

3 vue-cli · read ECONNRESET

重新安装一次脚手架

 npm install vue-cli -g

4 vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET

造成原因： 网络原因

处理方式

多试几次
如果还不行的话，推荐从git上面去进行一个下载，或者切换个网络，使用手机开热点试试。

Vue新建项目——页面初始化
lime2019的博客
07-03 1479
通过VueCLI新创建的Vue项目，页面存在一些问题： 页面四周有空白 页面默认不会占满浏览器高度 页面周围空白问题原因： VueCLI新创建的Vue项目，页面默认外边距为8px； 页面高度100%设置问题原因 我们知道： 如果一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可以使用的最大宽度，但是不会分配高度； 另外块级元素的高度是由子元素堆砌起来的，因此html和body标签的高度也是由子级元素堆撑起来； 元素高度百分比需要向上遍历父标签找到一个定值高度才能起作用，如果中间有一个
解决Vue新建项目报错：Failed to get response from https://registry.npmjs.org/vue-cli-version-marker
学习，是熵减的最有效途径。
08-06 943
2024年8月6日，新建vue项目的时候报错：Failed to get response from https://registry.npmjs.org/vue-cli-version-marker，记录一下解决过程。
Vue 新建项目
weixin_42350100的博客
07-07 470
Vue 新建项目
vue新建一个项目
youzhiji的博客
05-30 4728
如何用vue来创建一个新的项目 一、安装node.js 首先到node.js官网下载一个node.js最新稳定版本 然后双击就可以安装 然后直接下一步的傻瓜式安装，直到Finish完成安装。 windows+r 打开控制命令行程序输入（cmd）回车,检查是否安装成功 输入node -v检查node.js版本，node.js自带npm版本 输入npm -v检查npm版本 输入npm install -g npm 跟新npm最新版本 使用淘宝镜像 国内直接使用使用npm的官方镜像是非常慢的，所以推荐使用淘
vue新建项目
liuhaoxin666的博客
03-25 227
vue新建项目 1.在src下的components文件下新建一个vue项目 2.进入router下的index.js，如图一。然后在里边模仿上边的输入自己的，其中白色的helloworld是项目名字，from后边的是之前创建的vue文件夹的路径，如图2。然后再在最下边，复制花括号里边，包括花括号这一段，其中path：“/”是指跳转到首页，之后创建的在/后边输入vue文件的路径，name改成新建的...
vue新建项目cmd命令详细解析.docx
12-16
Vue 新建项目 cmd 命令详细解析 本文将详细解析 Vue 新建项目的 cmd 命令，包括项目创建、Git 存储库初始化、插件安装、 npm 包管理等内容。 一、项目创建 使用 Vue CLI 创建新的 Vue 项目需要选择预设（preset）...
vue新建项目并配置标准路由过程解析
10-15
本文将详细解析Vue新建项目并配置标准路由的过程。 首先，我们从`index.js`（通常位于`src/router/index.js`）开始，这是Vue应用的核心路由配置文件。在这个文件中，我们需要导入`Vue`和`vue-router`库： ```...
新建一个Vue项目
qq_46109465的博客
08-03 242
新建一个Vue项目
vue创建一个项目
weixin_55869175的博客
03-13 1282
vue脚手架创建一个vue项目
VUE 创建新项目
老四的博客
06-22 1013
前提：安装node.js 官网下载。我是在VSCode的上写VUE代码，你可以在VSCode的终端里敲命令  如果你没创建过VUE项目，按如下步骤创建：<1>. 在项目里安装vux npm install vux --save<2>. 安装vux-loader （这个vux文档似乎没介绍，当初没安装结果报了一堆错误）  npm install vux-loader --sa...
VUE新建一个项目（详细）
qq_43033730的博客
04-02 581
第一步 下载node.js npm安装 下载完成之后，双击安装，一直点击next即可 点击finishi完成安装 打开控制命令行程序（CMD）,检查是否安装成功 虽然node自带npm 如果不是最新版本，可使用npm install -g npm更新至最新版本 使用淘宝NPM 镜像 大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 npm insta...
Vue 创建项目
az44yao的专栏
05-19 92
2.x vue init webpack-simple vue init webpack 3 vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到pub
VUE新建一个项目（完整过程）
weixin_47521196的博客
12-29 2855
一、从node官网安装node.js 网址Node.js (nodejs.org)，建议下载稳定版本。下载到本地后双击安装，一直点next，知道finish安装完成。 安装完成后，打开命令提示符cmd，输入node -v,检查一下，出现版本号即安装成功。 ...
VUE创建项目
AI小华仔的博客
02-09 519
1.vue init 使用 vue init 命令来创建一个项目： $ vue init webpack (vue3-test) // 项目名，这里需要进行一些配置，默认回车即可 进入项目，安装并运行： $ cd vue3-test $ cnpm run dev DONE Compiled successfully in 2558ms I Your application is running here: http://localhost:8080 2.Vite
Vue创建项目
孙先森的博客
11-09 233
最近接触了下前端vue开发，记录下一些基本操作，如何创建一个vue项目。 环境配置 环境需要： Node JS 下载地址 WebStorm (编译器 根据个人习惯选择) 首先安装Node JS，需要配置环境变量，比较简单就不多说了；安装完成后输入node -v 验证是否配置成功； node -v 接着输入npm install npm -g 安装包管理器 npm install npm -g 安装完成后输入 npm -v 来验证是否安装成功； 下面接着通过npm 安装 vue 相关工具，安装打包
创建vue项目
qq_55046209的博客
08-03 482
编程学习最重要的是实践，多写代码，多解决问题，不断提升自己的技能。在创建过程中，选择默认的 preset 或者手动选择你需要的功能。确保已经安装了Vue CLI。
vue新建简单项目
最新发布
03-29
### 创建一个简单 Vue.js 项目的指南 要创建一个简单的 Vue.js 项目，可以按照以下方法操作。以下是详细的说明： #### 安装 Vue CLI 工具 为了更方便地管理 Vue 项目，建议安装 Vue CLI (Command Line Interface)，这是一个官方提供的工具，用于快速搭建大型单页应用。 运行以下命令来全局安装 Vue CLI： ```bash npm install -g @vue/cli ``` 验证是否成功安装可以通过执行 `vue --version` 命令[^1]。 #### 初始化一个新的 Vue 项目 通过 Vue CLI 来初始化新的项目结构。打开终端并输入以下命令： ```bash vue create hello-world ``` 这会启动交互式的向导界面，允许选择预设配置或者手动调整功能模块（如路由、Vuex 状态管理器等）。对于初学者来说，默认设置通常已经足够满足需求。 #### 启动开发服务器 进入刚刚创建好的目录，并启动本地开发环境以便实时查看效果变化。 ```bash cd hello-world npm run serve ``` 上述脚本定义于 `package.json` 文件中的 `"scripts"` 部分；如果希望自定义构建行为，则需在此处添加相应条目[^2]。 当服务开启后，在浏览器地址栏访问 http://localhost:8080 即可看到默认页面展示出来。 #### 调试与优化 在实际编码过程中难免遇到各种问题，此时就需要借助一些辅助插件来进行排查分析工作了。比如 Chrome 浏览器上的 **Vue DevTools** 扩展能够直观显示组件树形结构以及数据流动情况等等重要信息。 另外还有其他实用的小型库可以帮助提升效率，像 DejaVue 可视化调试工具 或者 vue-clicky 插件可以直接右键点击任何组件获取其内部详情打印到控制台里去。 --- ### 示例代码片段：基础 Hello World 组件 下面是一个非常基本的例子用来演示如何编写最简单的 Vue 应用程序之一——“Hello world”。 ```html <template> <div id="app"> {{ message }} </div> </template> <script> export default { name: 'App', data() { return { message: 'Hello from Vue!' } }, }; </script> <style scoped> #app { font-family: Arial; } </style> ``` 此模板展示了如何利用双大括号语法绑定变量至 HTML 元素上，并且还包含了样式部分以定制外观表现形式。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值