我的第一个vue项目

author author     2022-09-09     361

关键词:

  作为一个研一的学生,一开始对vue框架这个概念也仅限于听说过。正打算在研一下半学期学习了解一下vue框架,正巧在此时实验室接手了一个全新的项目,于是我就全身心投入到了vue的研究中。下面是我总结的一些我的第一个vue项目的过程、问题等等。

  首先要先搭建一下vue运行环境:

  1.下载node.js  (http://www.runoob.com/nodejs/nodejs-install-setup.html)

  2.基于node.js,利用淘宝npm镜像安装相关依赖,在cmd里直接输入:npm install -g cnpm

  3.安装webpack,在cmd里直接输入:  cnpm install webpack -g

  4.安装vue脚手架,在cmd里直接输入: npm install vue-cli -g

  5. 在硬盘上找到一个文件夹方工程用,在终端中进入该目录
     cd 文件目录
  7. 初始化一个vue项目,在cmd里直接输入:vue init webpack 工程名字<工程名字不能用中文>

  8. 安装项目依赖,在cmd里直接输入:npm install

  9. 安装路由模块vue-router和网络请求模块vue-resource,在cmd里直接输入:cnpm install vue-router vue-resource --save

  10. 启动项目,在cmd里直接输入:npm run dev

  到此,就完成了vue环境的搭建,我在设计项目的时候用的是webstorm集成环境,它算是idea的一个子系统,但是在使用vue框架的时候,idea兼容不是很好,总是会出现红色的错误提示,如果有强迫症的朋友最好用webstorm来进行开发。

  环境搭建好了之后,我在网上找了许多的样式模板,借鉴其中的一些样式设计。确定了设计的样式布局后,我开始了我的第一个vue项目。 我查阅许多网上的资料,发现好多人都说vue.js官方网站介绍的很详尽,但是对于一个什么都不懂的小白,看这些资料也是很费脑子,有些也是理解不了的。而且开发时间有限,我也只能硬着头皮就这么边查资料边实现功能。在整个开发过程中我用到了一个组件:(http://element.eleme.io/#/zh-CN/component/tooltip  vue组件网站),这个组件帮我很好的实现了很多功能。

  我开始设计目录文档,将我需要的页面按功能划分模块进行设计。设计完目录,将每个页面的路径配置在路由管理文件中。在设计项目的时候遇到了很多问题,有些我也记不清发生的顺序了,所以以下的陈述就根据具体问题划分。

 

  问题:

待更新。。。。。。

springboot+vue前后端项目的分离(我的第一个前后端分离项目)(代码片段)

文章目录1、前端vue的搭建2、后端项目的构建pom文件中引入的jar包yml文件用来配置连接数据库和端口的设置application.property进行一些整合controller层(这里返回给前端的数据用json)service层imp层mapper实体类额外写一个类、解... 查看详情

我的第一个项目:(解决问题)vue中canvas无法绘制图片(代码片段)

好家伙, 现在,我想要把我的飞机大战塞到我的主页里去,想办法把文件导入 然后,直接死在第一步,图片渲染都成问题 先用vue写一个测试文件来测试canvas的绘制<template><div><divref="stage"></div><button@click="... 查看详情

我的第一个项目:飞机大战vue版本塞到主页(代码片段)

好家伙, 这是未进行分包的vue版本的飞机大战效果如下:  这里说明一下,大概使用逻辑是提供一个<div>然后在这<div>中渲染游戏 游戏主界面代码如下:<template><div><h1>欢迎来到主页面</h1><div... 查看详情

我的第一个vue

  html:<divid="good">write</div>js:vargood=newVue(el:‘#good‘,data:write:‘helloFridge!‘) 效果图:     查看详情

创建你的第一个vue项目(代码片段)

npm install vue-cli -gvue init webpack my-projectcd myprojectnpm installnpm run dev;npm install vue-router --save (路由管理模块)npm  查看详情

Nativescript-vue TabView 无法呈现来自 API 的第一个项目

】Nativescript-vueTabView无法呈现来自API的第一个项目【英文标题】:Nativescript-vueTabViewunabletorenderfirstitemcomingfromAPI【发布时间】:2020-10-2819:39:36【问题描述】:情况:我正在开发nativescript-vue应用程序,我使用TabView项目来创建选项卡... 查看详情

创建vue.js对象:我的第一个vue.js输出信息

 <!DOCTYPEhtml><html><head><metacharset=”utf-8″><title>Vue第一条信息</title><scriptsrc=”js/vue.js”></script></head><bod 查看详情

我的第一个 Prime Faces 响应项目 [重复]

】我的第一个PrimeFaces响应项目[重复]【英文标题】:MyfirstPrimeFacesResponsiveproject[duplicate]【发布时间】:2017-07-2510:45:08【问题描述】:对于我的学士学位,我需要使用JSF和PrimeFaces开发响应式Web应用程序。我的问题是我不知道如何... 查看详情

我看不到添加到我的 ListView 的第一个项目

】我看不到添加到我的ListView的第一个项目【英文标题】:Ican\'tseethefirstitemaddedtomyListView【发布时间】:2018-06-0902:48:36【问题描述】:我有一个使用OpenSQLiteHelper制作的数据库,我从中获取一串名称并将其添加到ListView。我永远看... 查看详情

qt学习笔记我的第一个程序

今天,学习搭建一个空项目,了解程序是如何运行的。(1)新建一个空项目  1、在创建完空项目之后,项目中只有一个空的项目文件(.pro)      2、然后需要在项目文件(.pro)中添加:  1QT+=widgets23SOURCES+=4main... 查看详情

vuehub:我用chatgpt开发的第一个项目,送给所有vue爱好者

大家好,我是DOM哥。我用ChatGPT开发了一个Vue的资源导航网站。不管你是资深Vue用户,还是刚入门想学习Vue的小白,这个网站都能帮助到你。网站地址:https://dombro.site/vue#/vue大家好,我是DOM哥。我用ChatGPT开发了一个Vue的资源导航... 查看详情

Sortable 的 VueDraggable 无法正常工作,并将所选项目发送到初始化时的第一个

...rstoninit【发布时间】:2020-12-0304:30:25【问题描述】:我在我的Nuxt项目中使用Vue.Draggable。我在一些页面和组件中使用了它,一切都很好。但在我的一个页面 查看详情

vue3 路由器不显示我的组件

】vue3路由器不显示我的组件【英文标题】:vue3routerdoesn\'tdisplaymycomponents【发布时间】:2021-09-1206:12:35【问题描述】:我在我的项目中使用vue3,我构建的第一个项目与组件和路由器一起正常工作,但是现在,当我想在我的主页中... 查看详情

我的第一个开源小项目终于诞生了!

这个小项目(卡片秀)是一个卡片抽奖特效,用开源项目这样的词语让我多少有些羞愧,毕竟作为一个涉世未深的小伙子,用项目的标准衡量还有很大差距。不过该案例采用jQuery插件方式编写,提供配置参数并且做了浏览器兼容... 查看详情

我的第一个flask项目

项目背景提要        最近公司经常有测试,产品,开发人员需要我帮忙查看服务器上面发送的短信验证码来完成工作上的一些需求。我们的短信验证码由我们后台程序发出,调用第三方短信平台发送... 查看详情

我的第二十二篇博客---vue

Vue.js基本概念:首先通过将vue.js作为一个js库来使用,来学习vue的一些基本概念,我们下载了vue.js后,需要在页面上通过script标签引入vue.js。开发中可以使用开发版本vue.js。产品上线要换成vue.min.js。<scripttype="text/javascript"src="..... 查看详情

创建我的第一个django项目

1:django-admin.pystartprojectTest3(创建完后目录结构如下)  2:创建views.py文件() 3:配置urls.py文件: 4:python3manage.pyrunserver(出现如下界面,表示启动成功) 二:动态视图       &nbs 查看详情

浅谈我的第一个看得见的项目

项目中的难题及困难:  1.第一天软件突然不能用了,建了三个Web项目,代码来来回回敲了三遍,依然不行,最后都不想做了,再见最后一个项目,不行就拉倒吧,然后软件行了,简称活见鬼系列。  2.做的过程中,发现自... 查看详情