创建Vue项目步骤

2024-04-27 13:08

本文主要是介绍创建Vue项目步骤,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

创建Vue项目步骤

vue-cli脚手架
全家桶技术栈:vue+vue-router+axios+vuex+antd(vue 版)

1.新建文件夹,安装vue-cil脚手架(npm install -g @vue/cli)

2.脚手架创建好后,创建项目(vue create [项目名])
https://www.cnblogs.com/coober/p/10875647.html →(看着链接的选项选择)
https://www.cnblogs.com/zhzq1111/p/12061151.html →【推荐看这个比较详细】

3.在项目里面,创建vue.config.js文件
https://blog.csdn.net/TurtleOrange/article/details/114085580 →(复制粘贴代码)
(执行npm run build,打开dist的html文件成功则项目创建完成)

【相关插件安装】
4.安装axios(npm install axios)
http://www.axios-js.com/zh-cn/docs/ →

5.安装相应的UI框架
Antd(npm i --save ant-design-vue)
https://www.antdv.com/docs/vue/getting-started-cn/ →

6.Router和Vuex(脚手架创建项目时已创建好)
https://router.vuejs.org/zh/installation.html →(Router)
https://vuex.vuejs.org/zh/installation.html →(Vuex)

7.使用rem(postcss-px2rem)
https://www.cnblogs.com/aramey/p/11017428.html →(安装postcss-px2rem)
https://blog.csdn.net/weixin_45762331/article/details/109904583 →(设置font-size)

这篇关于创建Vue项目步骤的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/940589

相关文章

vue 笔记,ref 及 $event 事件对象

ref : 在标签上添加 ref = “name” ,表示获取当前元素节点 1 <input type="text" ref="info"> 获取 1 this.$refs.info.value    获取事件对象 , 方法参数传递  $event  <button @click="Event($event)">事件对象</button> 获取 Event(e){co

git将本地项目托管到码云上(含git更换远程仓库步骤)

首先在码云上创建一个空项目 然后将自己本地的项目换成一个仓库,执行如下命令:(cd到自己的项目下) git init 执行完毕后,本地项目就会生成.git的文件 下一步,添加远程仓库,也就是在码云上创建的空项目的链接 git remote add origin 码云项目的链接 下一步,将码云上的仓库pull到本地文件夹 git pull origin master 下一步,将自己的改动的

CSS Flex弹性布局,多个div自动换行

之前被人问到如果有一个div里面有多个小的div 如何做到缩小页面的时候实现小div的换行,首先我想到的其实是bootstrap里的栅格化布局。后来才想到CSS3还有这么一个属性。现在跟大家分享一下。 源码: <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" cont

SCSS - 嵌套

嵌套{{}} 嵌套就像下面的样子,先写自身的样式,再嵌套子元素。 嵌套不要超过三层,否则产生难以理解的代码。   #a {float: right;.nav {float: left;color: red;ul {width: 400px;li {font-size: 30px;a {color: blue;}&.active {font-weight: bold;}}}}} 注意&

【转】Vue2.0 Vue.set的使用

这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据。 首先在列表中动态新增一条数据:   <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><body><div id="app2"><!--想了解这里key的作用请访问:(https://cn.vuejs.o

Android Studio项目修改工程名字和Module名字

修改工程名: 1、关闭Android Studio 2、修改工程所在文件夹名字 3、打开Android Studio重新import改名后的工程文件夹,Android Studio会自动完成其他文件的改名,导入完成后即可正常开发   修改Module名字 1、右键Module->Refactor->Rename 2、弹出界面选择Rename module,点OK 3、在下一个界面输入想

【微信小程序开发】微信小程序、大前端之flex布局方式详细解析

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

如何修复Windows中的“无Internet,安全”错误?这里有详细步骤

序言 在Windows计算机上连接到互联网非常容易,但是,当你尝试连接到网络时,Windows有时可能会显示消息“无Internet,安全”。此消息的确切含义是什么?如何修复?以下是你需要了解的所有信息。 为什么Windows显示“无Internet,安全”消息 “无Internet,安全”消息是一个常见的网络相关问题,在Windows 10和Windows 11上都可能发生。当你试图连接到

Vue.js更深入的认识、理解和部署优化

原文链接:http://caibaojian.com/step-in-vue-js.html 编辑注:上一篇文章我们推荐了一篇关于Vue.js与angular的一个认识,今天这篇文章都是讲Vue.js的知识,从Vue.js的开发流程、构建方式、部署和优化工作出发,相信对你学习Vue.js会有所帮助。· Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目

Vue与React比较

之前用到了Vue进行开发,后来用了React,然后总是被问到为什么用React?总是说得有点模棱两可,下面总结了一下,希望得到补充与指正 相同点 React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM,有自己的diff渲染算法提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。将注意力集中保持在核心库,而将其他功能如路由和全局状态管理