关于前端Vue脚手架的完整搭建

news/2025/1/25 2:02:23/

创建脚手架

在VSC中打开命令行,输入如下命令可以用于创建脚手架

Vue create <项目名称>

会出现如下选项:
在这里插入图片描述
前面是选项的名称,括号中的是选项包含有:
1、Vue的版本
2、babel是用于将高版本的js转化成为低版本的js,以此达到低版本浏览器的兼容
3、eslint作为代码检查工具,其作用主要有以下几点:

  • 统一代码风格规则,如:缩进用几个空格;是否用驼峰命名法来命名变量和函数名等。
  • 减少错误, 如:相等比较必须用 ===,变量在使用前必须被声明,在条件语句中不能使用赋值语句等。
  • 提高代码质量,如:函数最多有多少条件分支;最多有几个参数,代码块最多能嵌套多少层等。
  • 其他。如: 禁用alert。这可以提高用户体验,因为 alert 框的外观不是那么好看,而且往往与网站的风格不搭,一般都会自定义 alert 框。
    4、dart-sass、sass: 加载sass代码,如果页面样式要采用sass就需要进行依赖
    5、router:这是用于管理前端路由用的,主要包括配置路由页面配置,路由守卫
    6、vuex:这个主要是提供页面间数据共享的,详细的可以去看Vue的笔记
    7、typescript:这个是javascript的升级版本,在javascript的基础之上增加了类型限制,在语法上也比javascript更加严格,关于它的详细介绍可以去看博客:https://blog.csdn.net/m0_57254953/article/details/124827194

而我们一般采用的是javscript+css的形式,如果只熟悉Vue2的话,没有相应的全部包的集合,所以我们这里选择一个小范围的,其他的包可以在后面进行安装,所以我们可以选择它进行安装
在这里插入图片描述
加载完成后控制台出现如下:

分析各个文件夹和文件:

我们先来看看项目的整体结构:
在这里插入图片描述

  1. node_modules:项目的依赖文件夹
  2. public:用于存放项目使到的一些静态资源(图片等),在最后webpack打包时会直接放入dist文件夹
  3. src:程序的源代码文件夹
  4. assetes:一般用于放置src里的组件所使用的静态资源(图片等),在最后webpack 打包时会直接当成一个模块打包到js文件夹里
  5. components:一般用于放置非路由组件和全局组件
  6. App.vue:项目中唯一的根组件
  7. main.js:程序的入口文件,项目中的第一个执行文件
  8. babel.config.js:项目的配置文件,一般用于兼容es5和es6语法
  9. package.json:记录vue项目的相关信息
    10.vue.config.js:文件是一个可选的配置文件,用于对Vue CLI进行个性化的自定义配置。可以通过该文件对Vue CLI的内部webpack配置进行修改和扩展,包括webpack的配置项和插件。这样可以在不 eject 的情况下对Vue CLI进行深度定制。
    以下是vue.config.js的一些常见配置选项及作用:
  • publicPath: 部署应用时的基本 URL;

  • outputDir: 打包构建输出目录;

  • assetsDir: 静态资源目录;

  • indexPath: 指定生成的 index.html 的输出路径;

  • devServer: 自定义开发服务器选项;

  • lintOnSave: 是否开启ESLint;

  • configureWebpack: 扩展webpack配置;

  • chainWebpack: 链式调用webpack配置;

  • productionSourceMap: 是否在生产环境下生成 source map;

  • parallel: 是否启用 thread-loader 进行多线程打包。

引入相关的包和配置

上面讲到过Vue2版本的选项包含的包是不全的,所以这里我们还得手动添加这几个包:router、vuex

router的安装和配置:

npm install vue-router@3.5.2 --save

通过上面的命令可以添加vue-router路由,@后面是版本号
然后进行相关配置:
我们一般将路由单独写在一个文件当中,在src–>router–>index.js
文件内容如下:

//引入、配置路由的相关信息
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//路由懒加载,加载页面路径
const HomePage = () => import( /* webpackChunkName: 'HomePage' */ '@/views/HomePage')
const ShopData = () => import( /* webpackChunkName: 'ShopData' */ '@/views/ShopData')
//配置路由数组对象
const routes =[{//redirect重定向path: '/', redirect: '/HomePage',
},
{path: '/HomePage',name: 'HomePage',component: HomePage
},
{path: '/ShopData',name: 'ShopData',component: ShopData
},
]
const router = new VueRouter({mode:'hash',routes,
})
export default router

然后再程序加载文件(src–>main.js)当中进行引入,如下:

import Vue from 'vue'
import App from './App.vue'
//引入路由对象
import router from './router' 
Vue.config.productionTip = falsenew Vue({//挂载到vue实例router,render: h => h(App),
}).$mount('#app')

然后再想要路由的页面通过router-view标签进行路由管理
跳转控件使用router对象来进行跳转,至此router的安装和配置以完成

vuex的安装和配置:

npm i vuex@3

通过上面的命令即可安装,注意的是vue2对应的vuex的版本是3,而vue3对应的vuex的版本是4,具体的vuex的工作原理可以去看以前的笔记
vuex也像router配置一样,需要另写一个文件(src–>store–>index.js),文件内容如下:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)// 用来存储数据
const state = {}
// 响应组件中的事件
const actions = {}
// 操作数据
const mutations = {}
// 用来将state数据进行加工
const getters = {}
// 新建并暴露store
export default new Vuex.Store({state,actions,mutations,getters
})

当数据要分类或者有点大的话可以不使用以上的这种配置,也可以如下:
每个模块都拥有自己的state、mutation、action、getter(index.js文件中):

//home模块的小仓库
//state:仓库存储数据的地方
const state = {}
//mutations:存放了可以修改state中数据的方法,且仅支持同步操作,修改state的唯一手段
const mutations = {}
//actions:同mutations类似,可以书写自己的业务逻辑,也可以处理异步,不直接更变数据状态,而是提交到mutations,由mutations进行变更
const actions = {}
//getters:理解为计算属性,用于简化仓库数据,让组件获取仓库的数据更加方便
const getters = {}
export default {state,mutations,actions,getters
}

然后在vuex配置文件引用就行,也可以把这些对象直接写入到vuex的配置文件当中(我之前也是如此做的,只不过这样会使得vuex的配置文件过于臃肿,所以不太建议)
在这里插入图片描述
然后在把vuex配置文件引入到加载文件当中(src–>main.js)
在这里插入图片描述
至此vuex的安装和配置已经完成

ElementUI的安装和配置:

npm i element-ui -S

按需引入:

npm install babel-plugin-component -D

然后将以下配置,放在导出对象中:

"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]

然后在页面上使用ElementUI组件即可:
https://element.eleme.cn/#/zh-CN/component/layout

Echart的安装和配置:

相关的安装配置梯子:
https://blog.csdn.net/sunshine641/article/details/112267889
https://blog.csdn.net/m0_49207266/article/details/128924481

文章来源:https://blog.csdn.net/m0_57254953/article/details/131241547
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/news/415960.html

相关文章

Exiv2 —— exiv2介绍及下载搭建环境(Vs2017)

Exiv2介绍 Exiv2 是一个跨平台C库和一个命令行实用程序&#xff0c;用于管理图像元数据。它提供对Exif&#xff0c;IPTC和XMP元数据以及ICC配置文件的快速简便的读写访问。 嵌入到各种格式的数字图像中。 Exiv2 作为免费软件提供&#xff0c;用于许多项目 包括KDE和Gnome Deskt…

Docker安装——CentOS7.6(详细版)

ps:docker官网 在 CentOS 上安装 Docker 引擎 |官方文档 &#xff08;&#xff09; 一、确定版本&#xff08;必须是7以上版本&#xff09; cat /etc/redhat-release 二、卸载旧版本&#xff08;或者之前装过&#xff0c;没有安装过就不用管了&#xff09; &#xff08;root用…

提示学习soft prompt浅尝,启发了p-tuing

一、前言 在高质量标注数据稀缺的工业界来说&#xff0c;少样本学习或者零样本学习的方法特别受欢迎&#xff0c;后面出现过一些少样本和零样本的方法&#xff0c;例如对比学习和prompt等&#xff0c;主流prompt的工作分为离散型和连续型模板。离散型主要还是插入bert特殊的tok…

Android低功耗蓝牙(BLE)开发(二)

在上一篇文章中我们了解了BLE的相关概念&#xff0c;这里我们来实际用代码演示安卓进行BLE连接和通讯的功能。本文代码基于Android5.0以上&#xff08;API 21&#xff09; 1.声明权限 在AndroidManifest.xml文件中添加BLE相关的权限声明。 <!-- 蓝牙权限 --> <uses…

【业务理解】什么是SPU、SKU、SKC

PU、SKU、SKC SPU Standard Product Unit &#xff08;标准化产品单元&#xff09; SPU是商品信息聚合的最小单位&#xff0c;是一组可复用、易检索的标准化信息的集合&#xff0c;该集合描述了一个产品的特性。通俗点讲&#xff0c;属性值、特性相同的商品就可以称为一个SPU。…

用oFono控制Nokia手机

因为oFono的plugins中加入了对Nokia Phonet的支持&#xff0c;oFono已经可以支持市场上比较高端的N系列手机了&#xff0c;如N900&#xff0c;N97等。我手上没有支持手机的列表&#xff0c;如果你有兴趣的&#xff0c;可以把你的手机通过数据线连上PC&#xff0c;在Linux用oFon…

里约热内卢圣徒java_里约热内卢:圣徒之城

快速搜索机型: 诺基亚 N73系列(240320) N73 5320 5320XM 5320di_XM 5630XM 5700 5700XM 5710XM 5730XM 6110 6110N 6120 6120C 6120ci 6121 6122C 6124C 6210S 6210ci 6220C 6290 6650F 6700S 6702S 6710N 6720C 6730c 6788 6788I 6790 C5 C5-01 E101 E50 E51 E52 E55 E65 E66 …