当前位置:首页 > 网站建设 > 正文内容

Vue商城项目(vue项目怎么跑起来)

网站建设2年前 (2023-03-20)1390

本篇文章给大家谈谈Vue商城项目,以及vue项目怎么跑起来对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

Vue项目启动过程以及配置

我们点击 npm run dev 的时候,这就是启动 Vue 工程项目,那么它启动过程是什么样的呢? Vue 项目启动过程,本文简要介绍。

在执行 npm run dev 的时候,会在当前目录中寻找 package.json 文件,包含项目的 名称版本 、 项目依赖 等相关信息。

从下图中可以看到, 启动 npm run dev 命令后,会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。

webpack.dev.conf.js 中引入了很多模块的内容,其中就包括 config 目录下服务器环境的配置文件。

可以看到,在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置,默认启动端口是 8080 ,这里可以进行修改。

index.html 的内容很简单,主要是提供一个 div 给 vue 挂载。

main.js 中, 引入了 vue 、 App 和 router 模块, 创建了一个 Vue 对象,并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下, 并绑定了一个路由配置。

上面 main.js 把 App.vue 模板的内容,放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到,这个页面的内容由一个 logo 和一个待放置内容的 router-view , router-view 的内容将由 router 配置决定。

查看 route 目录下的 index.js ,我们发现这里配置了一个路由, 在访问路径 / 的时候, 会把 HelloWorld 模板的内容放置到上面的 router-view 中。

HelloWorld 中主要是一些 Vue 介绍显示内容。

所以,页面关系组成是 index.html 包含 App.vue,App.vue 包含 HelloWorld.vue 。

到这,我们开始安装 router 、 vuex 。

Ctrl+C 退出启动,继续执行 vue-cli ,脚手架安装插件 router 和 vuex 开始。

输入一个大写Y,按下Enter

vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

Vuex 主要有五部分:

① 安装 vuex

接下来我们在 src目录 下创建一个 vuex 文件夹

并在 vuex文件夹 下创建一个 store.js 文件

文件夹目录 长得是这个样子

在保证我们处于我们项目下,在命令行输入下面命令,然后,安装 vuex 。

② vuex 的关系图

③ 开始使用,在 mian.js 中,引入 vuex

④然后告知 vue 开始使用 vuex (Vue.use(Vuex))

在 store.js 文件中,引入 vuex 并且使用 vuex ,这里注意我的变量名是大写 Vue 和 Vuex

⑤接下来,在main.js中引入store

到这里算是,以及完成了。

我们再重新看一下此时的项目结构,多了router.js和store.js,其它相关的文件也被修改

使用VUE搭建H5项目

最近开发一个h5项目,项目使用的vue2.0+vant

主要有以下几步

1、使用vue-cli创建项目

2、引入vue-router

3、引入vuex及vuex-persistedstate

4、引入vantui

5、引入sass

6、引入flexible

7、引入postcss-pxtorem

8、引入axios

9、配置开发生产测试环境参数

10、引入其他相关库,例如moment、lodash等

电商平台可以用vue技术吗

vue是可以做电商平台的,主要是根据电商平台选取的方案不同vue使用方法也不同。

扩展:vue能不能在电商平台使用?首先要了解什么是vue与传统JS和JQuery框架不同,Vue的渐进式框架表示开发者可以由简单组件写起,渐渐搭建出一个复杂的前端平台。形成Vue渐进式框架的核心概念为:组件化,MVVM,响应式,和生命周期。vue.js一般用的地方是:1、针对于移动端,首选vue入门成本低,快速上手;2、针对于维护较少,组件复用要求不高的项目;3、针对具有复杂交互逻辑的前端应用;4、可以提供基础的架构抽象;5、可以通过AJAX数据持久化,保证前端用户体验。

vue技术涵盖了首页,商品列表页,搜索页面,购物车页面,个人中心页面使用的vue-cli3.0进行搭建项目,所以说vue不仅可以用在电商平台还可以用在页面框架。

关于Vue商城项目和vue项目怎么跑起来的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://chlfg.com/post/13154.html

分享给朋友:

“Vue商城项目(vue项目怎么跑起来)” 的相关文章

关于淄博网站建设的信息

关于淄博网站建设的信息

本篇文章给大家谈谈淄博网站建设,以及对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、淄博做网站哪家好? 2、淄博网站建设哪家公司便宜? 3、淄博建网站公司:移动端网站建设需要注意哪些问题 4、淄博网站建设 5、淄博网站建设公司哪家最好呢? 6、在淄博想...

kitten源码编辑器(编程猫源码编辑器kitten)

kitten源码编辑器(编程猫源码编辑器kitten)

本篇文章给大家谈谈kitten源码编辑器,以及编程猫源码编辑器kitten对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、kittentimeover代码如何编写 2、源码编辑器小可问乖法题那个怎么弄 3、编程猫可以cpu指令吗 kittentimeover代码...

建党100周年手抄报模板打印(建党100周年手抄报模板打印图片)

建党100周年手抄报模板打印(建党100周年手抄报模板打印图片)

本篇文章给大家谈谈建党100周年手抄报模板打印,以及建党100周年手抄报模板打印图片对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、2021纪念建党100周年手抄报一等奖 2021喜迎建党100周年手抄报作品 2、2021建党100周年主题手抄报 2021建党主题手抄...

作业帮答题模板百度网盘(作业帮答题纸 百度网盘)

作业帮答题模板百度网盘(作业帮答题纸 百度网盘)

本篇文章给大家谈谈作业帮答题模板百度网盘,以及作业帮答题纸 百度网盘对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、作业帮扫一扫答题怎么样 2、以前很火的答题软件忘记名字了 3、作业帮怎么答题赚钱不见了 作业帮扫一扫答题怎么样 作业帮扫一扫答题非常方便,作为时下...

学前儿童语言游戏活动教案(学前儿童语言游戏活动教案中班)

学前儿童语言游戏活动教案(学前儿童语言游戏活动教案中班)

今天给各位分享学前儿童语言游戏活动教案的知识,其中也会对学前儿童语言游戏活动教案中班进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、幼儿中班语言活动教案 2、大班语言活动教案 3、幼儿园大班语言活动教案 4、《乌龟桥》幼儿园中班语言游戏活动教案...

镭射票模板绘旅人(时空中的绘旅人镭射票尺寸)

镭射票模板绘旅人(时空中的绘旅人镭射票尺寸)

今天给各位分享镭射票模板绘旅人的知识,其中也会对时空中的绘旅人镭射票尺寸进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、光夜镭射票尺寸 2、为什么镭射票这么贵 3、镭射票是硬的还是软的 光夜镭射票尺寸 镭射票尺寸是6.8cm×21cm。镭射票属于周...