Vue新建项目


前言

开发使用环境:

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.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、付费专栏及课程。

余额充值