编程教育资源分享平台

网站首页 > 技术文章 正文

vue项目搭建及总结

luoriw 2023-11-16 13:00:11 技术文章 95 ℃ 40 评论

一、vue的两种安装方式

(1)直接在html中引入vue.js

(2)通过vue+nodeJS搭建

我们采用的是第二种方式

二、vue和nodeJS的关系

(1)nodeJS不是一个js框架,是一个基于Chrome V8引擎的javascript运行环境,所以会产生众多基于node的js框架和库,同时包括关于js模块化的库。另一个就是node可以创建本地服务器,从而可以使用js来编写后台程序。

(2)vue依赖node中的webpack打包工具,初始化vue项目,以及一些依赖包。

三、搭建vue项目

(1)安装node

(2)初始化vue项目,初始化命令:vue init webpack my-project


需要注意的是:node的版本需要和npm版本相对应

(3)初始化项目后,进入到project目录下使用命令npm run dev来启动项目。这个命令的执行是通过vue脚手架找到项目的根目录下的package.json文件,scripts表示脚本部分,作用是把webpack的原生命令进行 代理。其中build即是打包命令。执行了npm run dev则会启动端口,在开发

(4)vue目录结构,项目目录:webroot->vue->project

在build下的webpack.base.conf.js中可配置文件引入路径的别名,引入的公共文件路径可在这里配置,移动文件时只需要修改这一个地方,如:@表示src目录.

四、关于vue的几大知识模块

(1)vue路由

vue使用的是单页面路由,即所有组件都是渲染在一个容器中,页面跳转时不需要重新加载页面,只是重新渲染组件。在开发应用时,前端分配页面地址,包括实际路径地址、name、别名、重定向、组件名称,实际访问路径可以是别名也可以是真实路径

(2)vue双向数据绑定,使用模板语言

(3)vue的生命周期

beforeCreate:this无法使用,data数据、method方法都是无法获取的

created:可以操作vue实例中的数据和方法,但是无法操作dom结构

mounted:挂载完毕,dom节点渲染到页面中,能操作dom结构

computed:计算属性,vue经常会在模板中使用一些简单的表达式来控制值,所以复杂的逻辑应使用计算属性来进行控制。可快速计算视图中的属性,并且计算会被缓存,在需要更新的时候更新。提升页面性能。一般是当做属性来使用

watch:侦听属性,用来监听data中的数据变化,还可以监听函数的中参数来获取新值和旧值,和计算属性有些类似,通常用这个属性来响应数据的变化,监听ajax返回的结果。监听特定数据的变化并作出具体的业务逻辑。

(4)vue组件的开发和调用:注册组件使用.vue文件,使用export default将组件暴露出去,在父组件中import进来,并声明组件,在父组件中直接使用组件名称作为标签名即可使用子组件

(5)vue的权限控制:控制用户登录权限,控制用户角色权限,在页面加载前判断是否已登录,如果已登录再判断用户是否有权限

Tags:

已有40位网友发表了看法:

  • python下载

    python下载  评论于 [2023-12-20 12:22:08]  回复

    vue 项目压缩不带依赖包

  • python下载

    python下载  评论于 [2023-12-20 12:26:32]  回复

    vue+nodejs项目引入spreadjs

  • python下载

    python下载  评论于 [2023-12-20 12:27:44]  回复

    如何从0搭建一个前端vue项目

  • python下载

    python下载  评论于 [2023-12-20 12:30:08]  回复

    通过vue.js实现国货购物网站首页

  • python下载

    python下载  评论于 [2023-12-20 12:32:17]  回复

    vue3.3.2和vuetify3.2.1需要node的版本

  • python下载

    python下载  评论于 [2023-12-20 12:32:29]  回复

    vue项目使用npm启动还是node

  • python下载

    python下载  评论于 [2023-12-20 12:34:33]  回复

    1个前端项目 node_modules 1个多g

  • python下载

    python下载  评论于 [2023-12-20 12:34:53]  回复

    vue+node怎么在vscode里创建一个全栈的项目

  • python下载

    python下载  评论于 [2023-12-20 12:35:17]  回复

    ruoyi项目中删除vue依赖依然可以使用

  • python下载

    python下载  评论于 [2023-12-20 12:36:50]  回复

    node版本v11.0.0搭建vue项目

  • python下载

    python下载  评论于 [2023-12-20 12:37:36]  回复

    如何搭建一个项目及前端vue框架

  • python下载

    python下载  评论于 [2023-12-20 12:39:10]  回复

    搭建一个node本地服务器运行vue项目

  • python下载

    python下载  评论于 [2023-12-20 12:43:27]  回复

    vue下载video8.6.1插件需要多高的node版本

  • python下载

    python下载  评论于 [2023-12-20 12:46:41]  回复

    ps d:\南航作业\作业\javascript\vue-project04-2\vue-project04˃ npm run dev np

  • python下载

    python下载  评论于 [2023-12-20 12:47:04]  回复

    vue 可以监听data里的值吗

  • python下载

    python下载  评论于 [2023-12-20 12:48:10]  回复

    vue项目搭建到开发总结

  • python下载

    python下载  评论于 [2023-12-20 12:52:09]  回复

    公司中的vue项目一般用什么搭建

  • python下载

    python下载  评论于 [2023-12-20 12:52:18]  回复

    vue3 node版本 w2 环境打不开

  • python下载

    python下载  评论于 [2023-12-20 12:53:24]  回复

    node12.16.1版本,搭建vue项目

  • python下载

    python下载  评论于 [2023-12-20 12:57:05]  回复

    脚手架yomen需要的node版本和npm版本

  • python下载

    python下载  评论于 [2023-12-20 12:57:30]  回复

    lockfileversion和npm版本对应关系

欢迎 发表评论:

最近发表
标签列表
最新留言