位置: 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 手写识别)

  • 腾讯视频青春v卡和vip有啥区别(腾讯视频青春v卡)

    腾讯视频青春v卡和vip有啥区别(腾讯视频青春v卡)

  • 发微信朋友圈文字不折叠的方法(发微信朋友圈文字加图片怎么发)

    发微信朋友圈文字不折叠的方法(发微信朋友圈文字加图片怎么发)

  • 苹果7怎么设置门禁卡(苹果7怎么设置悬浮球的功能)

    苹果7怎么设置门禁卡(苹果7怎么设置悬浮球的功能)

  • 永久删除视频如何恢复(怎样才能永久删除视频)

    永久删除视频如何恢复(怎样才能永久删除视频)

  • 芯片的主要作用(芯片是什么用途)

    芯片的主要作用(芯片是什么用途)

  • 视频md5是什么(修改md5后还会被测出搬运吗)

    视频md5是什么(修改md5后还会被测出搬运吗)

  • 华为p30悬浮窗怎么关闭(华为p30悬浮窗怎么调节大小)

    华为p30悬浮窗怎么关闭(华为p30悬浮窗怎么调节大小)

  • 录像机硬盘和电脑硬盘区别(录像机硬盘和电脑连接用什么APP)

    录像机硬盘和电脑硬盘区别(录像机硬盘和电脑连接用什么APP)

  • 苹果手机为什么会卡顿现象(苹果手机为什么打不开wifi开关)

    苹果手机为什么会卡顿现象(苹果手机为什么打不开wifi开关)

  • 手机怎么下载电影(手机怎么下载电视遥控器)

    手机怎么下载电影(手机怎么下载电视遥控器)

  • 苹果手机指纹在哪设置(苹果手机指纹在屏幕哪里)

    苹果手机指纹在哪设置(苹果手机指纹在屏幕哪里)

  • 互联网取票怎么刷学生证(如何互联网取票)

    互联网取票怎么刷学生证(如何互联网取票)

  • 手机放大器怎么用(手机放大器怎么样)

    手机放大器怎么用(手机放大器怎么样)

  • 如何分享微信聊天记录(如何分享微信聊天记录给别人)

    如何分享微信聊天记录(如何分享微信聊天记录给别人)

  • 华为nova震动在哪调(华为nova5震动失效)

    华为nova震动在哪调(华为nova5震动失效)

  • 被快手限流后多久开放(被快手限流后多久恢复)

    被快手限流后多久开放(被快手限流后多久恢复)

  • 惠普预装office是永久的吗(惠普预装office是网页版是正品吗)

    惠普预装office是永久的吗(惠普预装office是网页版是正品吗)

  • word西文空格是什么(word中西文空格是什么)

    word西文空格是什么(word中西文空格是什么)

  • 京东闲聊是什么(京东闲着赚软件正规吗)

    京东闲聊是什么(京东闲着赚软件正规吗)

  • safari高级设置webkit(safari高级设置哪些打开ios16)

    safari高级设置webkit(safari高级设置哪些打开ios16)

  • 抖音为什么不能转发(抖音为什么不能微信支付钱了呢)

    抖音为什么不能转发(抖音为什么不能微信支付钱了呢)

  • nova5发布会地点(nova5发布会时间)

    nova5发布会地点(nova5发布会时间)

  • 手机美图秀秀怎么改字(手机美图秀秀怎么压缩图片大小)

    手机美图秀秀怎么改字(手机美图秀秀怎么压缩图片大小)

  • 苹果macOS Big Sur系统电脑怎么安装微信? mac安装微信的两种方法(苹果macOS Big Sur 11.0.1全新系统壁纸)

    苹果macOS Big Sur系统电脑怎么安装微信? mac安装微信的两种方法(苹果macOS Big Sur 11.0.1全新系统壁纸)

  • Vue|内置指令(vue内置指令实验总结)

    Vue|内置指令(vue内置指令实验总结)

  • openAI api 生产最佳实践(open api平台)

    openAI api 生产最佳实践(open api平台)

  • 小规模纳税人的企业所得税税率
  • 工会经费的会计核算方法
  • 减免增值税款怎么算
  • 职工享受工伤保险
  • 招拍挂方式取得土地,应该取得土地后立项
  • 买卖金融商品应交增值税计算
  • 劳务分包服务费率
  • 公司的一些党员特别喜欢健身
  • 企业怎么办税
  • 一个季度发票开超出9万
  • 一个项目可以有几个单位工程
  • 分公司银行开户需要章程吗
  • 出售废旧物资可以开专票吗
  • 大巴车票抵扣税率
  • 进项税加计抵扣分录
  • 企业重组特殊性处理通俗理解
  • 出纳有哪些清点项目
  • 怎么把qq垃圾全部清除
  • 新成立的公司没有社保如何投标
  • thinkphp5控制器
  • 宽带连接错误代码691
  • PHP:pg_lo_create()的用法_PostgreSQL函数
  • 广告费增值税税目是什么
  • 销售产品应交的消费税分录
  • nodejs安装及环境配置win10
  • 前端几种下载文件
  • 雷尼尔山位于美国西北部
  • 合并报表内部交易顺流逆流
  • PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
  • php的implode
  • 数据库设计框架
  • 芒果sdk
  • 红包生成算法
  • 跨月的专用发票可以重新开吗
  • 个税各项减扣标准金额
  • 支付股息如何做账
  • 投资收益收到的现金增加的原因
  • 如何注册小微商户
  • Win10 64位安装个人版SQL2000图文教程
  • 认缴制下入股资产怎么算
  • 个人所得税手续费返还增值税申报表怎么填
  • 增值税税控系统专用设备
  • 物业公司收的停车费做什么科目
  • 建筑工程人工费调整
  • 收到海关进口关税怎么办
  • 应付账款一直挂在账上会有问题吗
  • 成品油经销企业资质
  • 应交个人所得税借方余额表示什么
  • 一般纳税人支付的哪些增值税进项税额不能抵扣
  • 企业购买土地如何缴税
  • 什么是暂估入账金额
  • 利润表季度申报本月金额却怎么填
  • 资产质量的相对性举例说明
  • win8无internet访问权限怎么解决
  • windows电源图标消失
  • vmware虚拟机安装Linux教程
  • 一键u盘安装系统
  • win7 手动输入用户名
  • svchoost.exe - svchoost是什么进程 有什么作用
  • win8.1应用
  • win10 20h2 v2
  • win8.1无法安装net framework 3.5
  • win7怎么调图片大小
  • unity小技巧
  • jquery的选择器有哪些举例说明
  • Node.js中的包管理工具是什么
  • 添加ie
  • JavaScript驾驭网页-DOM
  • jQuery基于ajax()使用serialize()提交form数据的方法
  • python黑魔法手册
  • javascript的主要用途
  • 长途客运手撕票能不能报销
  • 南京税务局是地市级还是副省级
  • 税控盘开票资料怎么导出几年前的开票信息
  • 税控盘监控信息写盘失败时钟校准
  • 单位发的一次性奖励如何扣税
  • 国家税务总局吕梁市税务局官网
  • 公司税务认证
  • 电子税务密码输入错误五次怎么办
  • 税务局监控个人账户流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设