Vue - 学习网站项目学习 - VUE项目启动配置

最新推荐文章于 2022-06-04 00:37:45 发布
最新推荐文章于 2022-06-04 00:37:45 发布
阅读量240 收藏 2
点赞数
分类专栏： 项目学习 Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33961117/article/details/85165430
版权
本文档详细介绍了Vue项目的启动配置过程，包括vue-cli的安装、环境配置、Vue项目创建、PyCharm中vue插件的安装以及项目目录解析和启动步骤。遵循教程，可以顺利搭建并运行Vue项目。
摘要由CSDN通过智能技术生成

目录

一、安装

1-1 vue-cli脚手架安装 安装教程

1-2 npm安装后的环境配置

二、3.0 Vue项目创建 - 空格选择，回车确定

 三、PyCharm  - vue高亮等插件（安装完后重启）

 四、项目目录解析

五、启动vue项目

一、安装

官方文档

1-1 vue-cli脚手架安装 安装教程

  1. 安装全局vue：npm install -g @vue/cli
  2. 在指定目录创建vue项目：vue create my-project
  3. 进入项目目录启动项目：npm run serve
  4. 通过指定服务器路径访问项目页面：http://localhost:8080/

1-2 npm安装后的环境配置

二、3.0 Vue项目创建 - 空格选择，回车确定

 

 

安装完成： 

 三、PyCharm  - vue高亮等插件（安装完后重启）

 

 

 四、项目目录解析

五、启动vue项目

 

LSYHhhhh
关注
专栏目录
uni-preset-vue-master uniapp项目模板
12-02
2. **配置文件**：包括vue.config.js，这是uni-app项目的配置文件，用于设置项目的一些全局属性，如publicPath、outputDir等，以及自定义构建规则。 3. **脚手架工具**：uni-app提供了命令行工具，通过npm或yarn...
关于VUE的路由重定向问题
Yxd0724的博客
06-15 1437
配置路由之后，默认访问path是“/”，此时只需给该路由对象中添加redirect属性，属性值为原path的属性值。 简单理解为启动项目时访问的是http://localhost:8080/,假如此时redirect:"/login"，则启动项目后的默认访问地址为http://localhost:8080/login。 import Vue from 'vue' import Router from 'vue-router' //使用路由 Vue.use(Router) export defa
解决新版阿里weex框架创建vue项目后打开http://localhost:8080/index.html空白
热门推荐
xjj19920608的博客
05-12 2万+
阿里的weex框架在4月更新了版本，根据官方的教程，使用weex-toolkit v-1.01之后的版本创建vue项目，并参考教程，搭建了整个项目，然后运行。http://weex.apache.org/cn/guide/set-up-env.html 整个项目的目录如下：但是当执行npm run serve之后，打开浏览器http://localhost:8080/index.html，出现了手
vue项目中点击非刷新按钮，页面刷新并且路由多了个问号解决方案
weixin_44867704的博客
07-19 542
问题描述 在vue项目开发过程中，点击查询或重置按钮，结果页面刷新了一遍，发现路径变成了 localhost:8080/?#/advanced 原因 这是因为在 form 表单里，点击了button 按钮，触发了表单的默认事件，也就是触发了提交行为。 解决方案 使用 @click.prevent 阻止默认事件即可 <button @click.prevent="handleCheck">查询</button> 或者不要 form 标签 ...
解决运行Vue项目localhost8080拒绝连接
weixin_51646732的博客
06-04 8821
localhost拒绝连接
详解vue-loader在项目中是如何配置的
12-03
如果你想要快速启动一个使用 Vue Loader 的项目，可以使用 Vue CLI 来简化配置流程： ```bash npm install -g @vue/cli vue create hello-world cd hello-world npm run serve ``` Vue CLI 自动配置了所有必需的...
使用vue-cli脚手架工具搭建vue-webpack项目
10-17
项目目录结构通常包括src目录，其中包含app.js（入口文件）、main.js（Vue实例的启动文件）、components（存放组件的文件夹）以及其他配置文件。此外，还有.babelrc（Babel配置文件）和package.json（项目配置文件，...
vue-admin-template-master.zip
12-05
通过运行简单的命令`vue create project-name`，你就可以快速生成一个新的Vue项目结构，包括源代码、测试、配置文件等。 接下来是Element UI。这是一个由Ele.me团队维护的开源项目，它包含了丰富的UI组件，如表格、...
CSS+HTML - 搭建小米商城首页 - 总结
LIN的博客
10-10 1万+
目录 第三方字体样式 字段间分割线的样式实现 搭建网站前的reset操作 鼠标悬浮出现浮框 - 购物车部分例子 - 重点步骤总结 块与块之间的分割线 块颜色的根据位置不同而不同 悬浮上移+阴影 第三方字体样式 fontawesome - 字体库 iconfont - 字体库 在浏览器中按f12打开【开发人员工具】，找到【console(控制台)】 输入以下代码，再...
Flask - 项目学习 - TypeError: __init__() got an unexpected keyword argument 'encoding'
LIN的博客
04-16 1万+
问题表现：可以正常启动框架，但是接口测试时候会返回500错误 问题出在eggit内 使用了 falsk框架下的json 解决方式：修改eggit内源码，使用json包 正常显示 ...
简单留言板前端（仿微博） - JQuery
LIN的博客
10-25 1万+
.html 结构文件 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;留言板&lt;/title&gt; &lt;link rel="stylesheet" href="cs
pycharm - 关于使用数据库 sqlite报错：java.lang.ClassNotFoundException
LIN的博客
11-22 8872
  报错信息：Exception in thread "main" java.lang.ClassNotFoundException: org.sqlite.JDBC      
基于Django的前端渲染方式总结
LIN的博客
01-11 5399
 目录 一、基于后台Render传输数据，前台使用Django-Template渲染 1-0 渲染方式特点总结 1-1 后台Render传输数据 1-2 Template前端获取数据渲染 1-3 详细学习博客跳转 1-3-1 Django - 模板层 - 变量、过滤器、标签 1-3-2 Django - 模板层 - 模板的导入和继承 、静态文件的使用 1-3-2 基于此方法实现渲染...
学习网站项目学习 - 基于Django 和 Vue的前后端数据交互
LIN的博客
12-21 5172
目录 一、前后端交互实现思路 1-1 前端思路 1-2 后端思路 二、前端设计 2-1 默认数据设置 2-1-1 创建视图组件 DataTest.vue 2-1-2 router.js 路由配置 2-1-3 App.vue配置 2-2 使用axios获取数据 2-2-1 axios安装 - npm install axios 2-2-2 main.js配置axios 2-2...
Django - JsonResponse - QuerySet对象（models查询返回结果）的Json格式的数据传输
LIN的博客
01-11 4191
  # 将QuerySet列表对象强制转换成普通的list进行传送 server_list = models.Server.objects.values(*filed_list) return JsonResponse(list(server_list), safe=False) 注意：方法可以举一反三，适用于其他不支持QuerySet列表对象的方法  ...
CMDB 项目学习 - 概念介绍、架构方式
LIN的博客
01-08 3354
目录 一、CMDB - 资产管理系统基本介绍 1-1 自动化运维平台的特性 - 标准化 1-2 CMDB 系统功能介绍 二、CMDB的架构方式 2-1 Agent架构实现 2-1-0 架构思路 2-1-1 架构特点及其优缺点 2-1-2 Agent程序的核心逻辑 - subprocess +requests 2-2 基于Paramiko模块的SSH连接架构实现 2-2-0 架构...
Django - 项目学习 - media处理图片文件，并前端显示
LIN的博客
11-29 2513
目录 一、模型 二、media文件夹建立（手动或者自动） 三、settings设定 3-1 MEDIA_URL 和 MEDIA_ROOT 3-2 TEMPLATES 下 'django.template.context_processors.media', 四、url配置 五、前端设置 一、模型 可对字段设定为FileField 或者 ImageField class ...
学习网站项目学习 - Django - 优惠券系统、结算系统
LIN的博客
12-29 2136
目录 一、优惠券类别表结构设计 1-1 优惠券类别 1-2 表结构设计思路 1-3 表结构实现代码 二、结算页面 2-1 前端数据渲染需求 2-2 购物车数据 2-3 结算系统 2-3-1 增加（post）  2-3-2 修改（put）  2-3-3 查看（get）  2-3-4 删除（del） 三、金额结算，跳转支付宝接口   一、优惠券类别表结构设计 1-1 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值