位置: IT常识 - 正文

Vue创建项目的步骤(vue项目创建流程)

编辑:rootadmin
Vue创建项目的步骤 1.创建Vue项目

推荐整理分享Vue创建项目的步骤(vue项目创建流程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuecli创建项目的过程,vue创建一个项目的命令,vue创建项目的步骤,vue创建项目后开始写的步骤,vue创建项目后开始写的步骤,vue创建项目后开始写的步骤,vue创建新项目,vue创建新项目,内容如对您有帮助,希望把文章链接给更多的朋友!

可以有两种创建vue的方式,一种是vue CLI脚手架,一种是vite工具

Vue CLI

基于webpack工具命令 vue create 项目名

create-vue

基于vite工具命令 npm init vue@latest也可以npm init vite-app 项目名

检查一下npm和node版本 

npm更新到最新版本方法  npm install -g npm

node需要去下载https://nodejs.org/en/

 

在公司开发项目的时候,可以添加Vue Router和Pinia,用方向键选择No/Yes。

下面是创建完项目后默认的项目结构 。

2.安装项目依赖

使用这个指令就可以下载依赖了。 

npm install

会多出来一个package-lock.json的文件。

3.项目的运行

项目运行的指令在package.json是可以看到的,也是可以修改的。

npm run dev

执行完指令很快就运行成功了。

4.项目配置

配置项目的icon

配置项目的标题

配置jsconfig.json

配置这个文件vscode会有更好的代码提示,如果不想创建这个文件也可以。

//jsconfig.json{ "compilerOptions": { "target": "es5", "module": "esnext", "baseUrl": "./", "moduleResolution": "node", "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }}5.项目目录结构划分

 

6.css样式重置

 需要对样式进行重置,可以用别人的文件。

npm install --save normalize.css

Vue创建项目的步骤(vue项目创建流程)

用完这个normalize.css文件之后,还需要一个reset.css来重置样式,common.css来编写一些常用的样式。 

//reset.cssbody, h1, h2, h3, h4, ul, li { margin: 0; padding: 0;}ul, li { list-style: none;}a { text-decoration: none; color: #333;}img{ vertical-align: top;}

 引入到index.css文件里面,可以作为一个唯一的出口。

在main.js导入index.css,相当于导入了reset和common两个文件。

vue中使用less 

<style lang="less" scoped></style>

要在style标签中加上lang="less",并且通过npm install less -D安装less,安装完成之后需要重新跑一下项目,ctrl+c停止项目。

7.路由配置npm install vue-router

如果前面的项目配置没有选择vue-router的话,也可以手动来配置。先安装vue-router。

在view文件夹里面创建想要的文件。

router创建index.js用来写router配置。

//router index.jsimport { createRouter, createWebHashHistory } from 'vue-router'const router = createRouter({ history: createWebHashHistory(), routes: [ { path:"/", redirect: "/home" }, { path:"/home", component: () => import("@/views/home/home.vue") }, { path:"/favor", component: () => import("@/views/favor/favor.vue") }, { path:"/order", component: () => import("@/views/order/order.vue") }, { path:"/message", component: () => import("@/views/message/message.vue") } ]})export default router

 

 配置完要有router-view才能用。

 

8.配置状态管理 

状态管理库现在有两个方案:

vuex:目前依然使用较多的状态管理库;pinia:推荐的库,未来趋势的状态管理库。

在Vue学习之认识到应用(三)都有讲到用法。

npm install pinia

在store里面创建index.js文件。 

pinia可以分模块。

import { defineStore } from "pinia"const useCityStore = defineStore("city", { state: ()=> ({ cities: [] }), actions: { }})export default useCityStore

在main.js使用pinia。

9.配置代码快捷

snippet generator

在这个网站把下面的代码复制进去,把生成的代码复制出来。

<template> <div class="home"> <h2>home</h2> </div></template><script setup></script><style lang="less" scoped></style>

vscode的菜单->文件->首选项->用户片段

把生成的代码粘贴进去就可以了,在vue文件就可以使用vue setup快速生成代码段了。

本文链接地址:https://www.jiuchutong.com/zhishi/299297.html 转载请保留说明!

上一篇:【Node.js】初识Node.js(node.js deno)

下一篇:uniapp 手写canvas海报(兼容android/ios/h5/微信小程序)(uniapp 手写识别)

  • oppo手机自带浏览器是哪个(OPPO手机自带浏览器怎么关闭广告)

    oppo手机自带浏览器是哪个(OPPO手机自带浏览器怎么关闭广告)

  • 荣耀20Pro深色模式怎么关闭(荣耀20 pro颜色)

    荣耀20Pro深色模式怎么关闭(荣耀20 pro颜色)

  • 全网通话费充值卡怎么使用(全网通话费充值券怎么用)

    全网通话费充值卡怎么使用(全网通话费充值券怎么用)

  • oppo手机键盘弹不出来(OPPO手机键盘弹钢琴)

    oppo手机键盘弹不出来(OPPO手机键盘弹钢琴)

  • 微信里的收藏删除了能找回吗(微信里的收藏删除在哪里)

    微信里的收藏删除了能找回吗(微信里的收藏删除在哪里)

  • 显示器开不了灯也不亮(显示器开不了灯一直闪)

    显示器开不了灯也不亮(显示器开不了灯一直闪)

  • Word字体缩放在哪里设置(word中字体缩放)

    Word字体缩放在哪里设置(word中字体缩放)

  • 华为荣耀9x语音助手怎么用语音唤醒(华为荣耀9x语音助手可以改变语音吗?)

    华为荣耀9x语音助手怎么用语音唤醒(华为荣耀9x语音助手可以改变语音吗?)

  • 苹果11屏幕多大(苹果11屏幕多大尺寸)

    苹果11屏幕多大(苹果11屏幕多大尺寸)

  • 苹果8plus没有led闪烁及提示(苹果8plus没有录音功能)

    苹果8plus没有led闪烁及提示(苹果8plus没有录音功能)

  • 华为最近删除照片在哪恢复(华为最近删除照片在哪)

    华为最近删除照片在哪恢复(华为最近删除照片在哪)

  • 笔记本电脑打不出中文字怎么办(笔记本电脑打不了汉字只有字母)

    笔记本电脑打不出中文字怎么办(笔记本电脑打不了汉字只有字母)

  • 拼多多sku编码填什么(拼多多sku编码怎么填写填)

    拼多多sku编码填什么(拼多多sku编码怎么填写填)

  • indesign和ai的区别(ai和indesign配合使用)

    indesign和ai的区别(ai和indesign配合使用)

  • 微信橱窗怎么开通(微信商品橱窗开通需要什么条件)

    微信橱窗怎么开通(微信商品橱窗开通需要什么条件)

  • 手机qq保存不了图片怎么回事(手机qq保存不了视频怎么回事)

    手机qq保存不了图片怎么回事(手机qq保存不了视频怎么回事)

  • 手机开热点会伤手机吗(手机开热点会伤害电池寿命吗)

    手机开热点会伤手机吗(手机开热点会伤害电池寿命吗)

  • 进程主要由哪三部分组成(进程有哪三部分)

    进程主要由哪三部分组成(进程有哪三部分)

  • qq通讯录能发信息吗(qq通讯录能发信息不)

    qq通讯录能发信息吗(qq通讯录能发信息不)

  • vivo手机sos功能怎么关闭(vivo手机sos设置在哪)

    vivo手机sos功能怎么关闭(vivo手机sos设置在哪)

  • 前端ui是什么(ui设计前端干什么的)

    前端ui是什么(ui设计前端干什么的)

  • 得力打卡机怎么调时间(得力打卡机怎么录指纹)

    得力打卡机怎么调时间(得力打卡机怎么录指纹)

  • 钉钉如何自动打卡(钉钉如何自动打卡无需打开程序)

    钉钉如何自动打卡(钉钉如何自动打卡无需打开程序)

  • dns.exe是什么进程 dns进程的作用是什么(dns进程)

    dns.exe是什么进程 dns进程的作用是什么(dns进程)

  • Win10如何打开regedit注册表编辑窗口(win10如何打开regedit)

    Win10如何打开regedit注册表编辑窗口(win10如何打开regedit)

  • 小茴香的养殖种植方法(小茴香的栽培技术)

    小茴香的养殖种植方法(小茴香的栽培技术)

  • 提存计划和受益计划选那个
  • 增值税加附加税加企业所得税加印花税是多少个税点
  • 向投资者分配现金股利会影响负债吗
  • 收购别人的公司要具备什么条件
  • 建筑施工安全费用专项检查报告怎么写
  • 企业退休返聘人员工资是否缴纳单位社保
  • 委托加工产品月末结转成本
  • 营业范围之外的产品可以出售吗
  • 个体工商户个人经营所得税优惠政策
  • 房企行业其他应收账款的来源是什么
  • 个人借支备用金限额
  • 材料销售的账务处理
  • 调减管理费用如何调整本年利润
  • 统一社会信用代码证
  • 应交税费 减免税款
  • 内账增值税会计核算
  • php如何实现字符串反转
  • 劳务公司找的临时工工伤怎么赔
  • 电脑没组装好会怎么样
  • 修建污水厂需要办理哪些审批
  • regsync.exe - regsync是什么进程 有什么用
  • 留存收益怎么计算,它属于企业的什么资金?
  • PHP:pg_field_type_oid()的用法_PostgreSQL函数
  • 股权无偿赠与协议书范本
  • u盘突然被写保护是坏了吗
  • php imagecopymerge
  • 公司报销之后钱发到哪
  • 在建工程完工后不转固定资产
  • 页面白屏可能原因前端
  • zabbix 执行命令
  • echarts series name
  • 煤炭贸易公司的业务流程
  • 小规模纳税人财务报表是按季还是按月申报
  • 邮寄的发票对方没收到怎么办
  • 上期未申报怎么办
  • 织梦cms官网
  • php网站访问量大怎么优化
  • 出租设备收入交什么税
  • 期间费用指哪些费用
  • 企业的利润率怎么算
  • 购房补贴退契税3个月没到账
  • 海关缴款书上完税价格含增值税吗
  • mysql监控sql性能
  • 餐饮管理公司如何收取管理费
  • 注销时其他应付款怎么冲平
  • 企业逾期贷款利息影响征信吗
  • 营业税暂行实施细则
  • 管理费用现金流量附表指定
  • 一张凭证上可以写多个摘要吗
  • 商业保险的养老保险可靠吗
  • 以前年度损益这个科目
  • 分公司利润如何纳税
  • 物业水电费计算
  • 一个真正的企业应该具备哪些特征
  • 房地产开发企业开发成本包括哪些项目
  • 企业经营规模小怎么办
  • sql做判断
  • mysql newid()
  • 腾讯云centos7有界面吗
  • Fedora25踏上Wayland的路上讲解
  • win7怎么删除win10系统
  • ubuntu系统怎么修改ip地址
  • u盘装系统步骤delt进入界面怎么选择
  • dcom进程
  • mac vm安装win10
  • centos挂载lun
  • quickdcf.exe - quickdcf是什么进程 作用是什么
  • win7打开tftp服务器
  • uup windows
  • win8系统文件
  • jquery 动态加载js
  • linux中date命令详解
  • js运行时错误
  • 零基础玩转python
  • js怎么使用
  • nodejs test
  • js从数组中选出最大的三个数
  • 比亚迪车载物联网卡
  • 事业单位大额资金拨付需要什么报账材料
  • 企业年金个人缴纳的辞职能拿吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设