如何分析网站,crm客户管理系统的功能有哪些,烟台网站seo,怀化二医院网站环境准备 介绍#xff1a;create-vue是Vue官方提供的最新的脚手架工具#xff0c;用于快速生成一个工程化的Vue项目create-vue提供如下功能#xff1a; 统一的目录结构 本地调试 热部署 单元测试 集成打包依赖环境#xff1a;NodeJS 安装NodeJS 一、 创建vue工程 npm 类…环境准备 介绍create-vue是Vue官方提供的最新的脚手架工具用于快速生成一个工程化的Vue项目create-vue提供如下功能 统一的目录结构 本地调试 热部署 单元测试 集成打包依赖环境NodeJS 安装NodeJS 一、 创建vue工程 npm 类似maven npm init vuelatest 根据命令提示 cd 项目名 npm install 然后用vscode打开项目 二、Vue项目的目录结构 vite.config.js Vue项目的配置信息如端口号等 package.json 等同于maven里的pom文件配置文件包括项目名、版本号、依赖包、版本等。 package-lock.json 项目配置文件不需要修改 index.html 默认首页 public 公共资源 node_modules 下载的第三方包存在目录 src源代码存放目录 src下面又有四个目录 assets : 静态资源目录、存放图片、字体 components组件目录、存放通用组件 App.vue根组件 main.js 入口文件 三、Vue项目-启动 执行命令 npm run dev 就可以启动项目 然后输入http://127.0.0.1:5137 重点编写Vue文件 主要包含三部分内容 控制模板的数据及行为 script setupimport {ref} from vue;//调用ref函数,定义响应式数据const msg ref(西安); /script模板部分由它生成HTML templateh1{{ msg }}/h1 /template当前组件的CSS样式 style scoped/* 样式 */h1{color: red;} /styleVue项目的入口文件是什么 main.js Vue的单文件组件中包含那些 三个部分 script setup /scripttemplateh1{{ msg }}/h1 /template style scoped/* 样式 */h1{color: red;} /style四、API风格 Vue的组件有两种不同的风格组合式API 和 选项式API 选项式API选项式API可以用包含多个选项的对象来描述组件的逻辑如datamethodsmounted等。 scriptexport default {data(){ //声明响应式对象return {count: 0}},methods: { //声明方法可以通过组件实例访问increment: function(){this.count ;}},mounted(){ //声明钩子函数console.log(Vue mounted ...);}} /script templatebutton clickincrementcount:{{ count }}/button /template组合式API script setupimport { onMounted, ref } from vue’; const count ref(0); //声明响应式变量function increment(){ //声明函数count.value;} onMounted((){ //声明钩子函数console.log(Vue Mounted ...’);}) /script templatebutton clickincrementcount:{{ count }}/button /templateApi.vue script setupimport {ref,onMounted} from vue//声明响应式数据 ref 响应式对象有一个内部的属性valueconst count ref(0); //在组合式api中,一般需要把数据定义为响应式数据//const count0;//声明函数function increment(){count.value;}//声明钩子函数 onMountedonMounted((){console.log(vue 已经挂载完毕了...);}); /scripttemplate!-- 写html元素 --button clickincrementcount: {{ count }}/button /template然后把这个Api.vue 在App.vue中引入 !-- script//写数据export default{data(){return {msg:上海}}} /script -- script setupimport {ref} from vue;//调用ref函数,定义响应式数据const msg ref(西安);//导入 Api.vue文件import ApiVue from ./Api.vue//导入Article.vue文件import ArticleVue from ./Article.vue /scripttemplate!-- html --!-- h1北京/h1 --!-- h1{{ msg }}/h1brApiVue/ --ArticleVue/ /templatestyle scoped/* 样式 */h1{color: red;} /style组合式Api一般需要把数据定义为响应式数据 const count ref(0) Vue的组件书写分为几种风格 选项式API 组合式API推荐使用组合式API用起来更加灵活 Element Plus Element 是饿了么团队研发的基于Vue3面向设计师和开发者的组件库。 组件组成网页的部件例如 超链接、按钮、图片、表格、表单、分页条等 Element Plus快速入门 准备工作 1、创建一个工程的vue项目 2、参照官方文档安装Element Plus组件库 npm install element-plus --save 3、main.js中引入Element Plus 组件库参考官方文档。 import { createApp } from vue //导入vue import ElementPlus from element-plus //导入element-plus import element-plus/dist/index.css //导入element-plus的样式 import App from ./App.vue //导入app.vue const app createApp(App) //创建应用实例 app.use(ElementPlus) //使用element-plus app.mount(#app) //控制html元素4、制作组件 访问Element官方文档复制组件代码调整 常用组件-分页条 常用组件-表格组件 常用组件-表单组件 常用组件-Card卡片