大数据分析技术应用-Hello world-第1个vue项目

7Helloworld第1个vue项目学习目标掌握vue项目目录结构掌握vue新建项目步骤132知识思政技能能创建vue项目能初始化vue项目培养细心的工作态度培养客观严谨精神一、vue新建项目在vue中新建项目的步骤为：1、在电脑硬盘新建一个文件夹，用来存放蜂行天下驾驶舱大屏项目。比如在D：\fxtx_project2、win+r打开终端，用cd命令，将路径切换到新建项目路径,cdd:\fxtx_project一、vue新建项目在vue中新建项目的步骤为：3、输入“vuecreate项目名称”语句新建项目。注意：项目名不能有大写字母，中文和特殊符号。一、vue新建项目default（babel是一个广泛使用的转码器，将es6转es5,eslint代码格式化工具)在vue中新建项目的步骤为：4、选择项目设置默认vue2或vue3自定义配置manuallly:手动设置,自行指定哪些插件安装,哪些不安装。相比于默认选择，更倾向于选择手动添加，选中Manuallyselectfeatures，敲回车进入下一步。一、vue新建项目在vue中新建项目的步骤为：5、为项目配置特征根据项目所需，按上下键切换选项，按空格键选择或者取消选择，配置项目。一、vue新建项目在vue中新建项目的步骤为：5、各特征的含义为：本项目选择1、4、5、6、7项，敲回车进入下一步。后面所有选项采用默认值即可。(*)Babel//使用babel()TypeScript//TypeScript可以根据项目需要去配置

()ProgressiveWebApp(PWA)Support//一般项目都不使用PWA(*)Router//建议添加vue-router，官方的路由管理包，添加之后会自动生成路由配置相关代码

(*)Vuex//建议添加vuex，官方的全局状态管理包，添加之后会自动生成全局状态配置相关代码

(*)CSSPre-processors//使用css预处理器，建议勾选，一般会使用scss或者less(*)Linter/Formatter//代码格式化相关配置

()UnitTesting//不配置测试

()E2ETesting//不配置测试一、vue新建项目在vue中新建项目的步骤为：6、为项目选择vue的版本，默认为vue3，本项目使用默认值。敲回车进入下一步。一、vue新建项目在vue中新建项目的步骤为：7、是否使用history路由模式，默认值为yes。选择history模式需要后台服务进行相关设置,这里输入n,回车

一、vue新建项目在vue中新建项目的步骤为：8、选择一个css预处理器，这里选择less，敲回车。一、vue新建项目在vue中新建项目的步骤为：9、自动代码格式检测,选择eslint+prettier，回车一、vue新建项目在vue中新建项目的步骤为：10、语法检测方式,，Lintonsave：保存就检查代码语法，Lintandfixoncommit：只有在commit的时候检查并修复。选择第1项，回车。一、vue新建项目在vue中新建项目的步骤为：10、选择配置信息存放位置，单独存放或者并入package.json一般默认选择第一个，插件配置单独存放在一个文件使用默认值直接敲回车进入下一步。一、vue新建项目在vue中新建项目的步骤为：11、是否保存为预设，这样下次创建项目就不用重新选择，默认值为no。使用默认值直接敲回车进入下一步。一、vue新建项目在vue中新建项目的步骤为：12、以上配置选择完毕后，就开始创建项目了，安装完项目所需的包后，终端提示项目创建成功。二、vue项目目录结构创建好vue项目以后，用vscode打开该项目，项目构成如下：node_modules：放置这个应用程序依赖的所有npm依赖项。public：放置需要提供给客户端的任何文件（如index.html文件）。src：放置这个应用程序的源文件，基本上要做的事情都在这个目录里components：放置应用程序中所有的Vue组件。5.routes：放置路由配置文件，其中定义了url和该url映射到的组件。6.store：放置Vuex状态管理模块，可以用来提供全局统一存储。

7.views：放置应用程序的特定页面（如表格，图形，表单等）。除上述目录外，Vue项目还可能有以下其他文件：1.app.vue是项目的根组件2.src/main.js是入口文件，在main.js文件中定义了一个vue对象3.package.json：一个软件包管理文件，包含了有用的信息，如应用程序的依赖项，构建工具，脚本等。4.README.md：一个提供该项目的基本概述的文件，可以包含关于项目的安装，配置和运行说明。5.eslintrc.js：用于配置Babel或ESLint的文件。三、vue项目初始化本小节最终要完成一个vue+echars项目，效果图如下：三、vue项目初始化vue项目的运行方法为：打开vscode终端,输入npmrunserve,然后打开下面链接中的任意一个，比如：http://localhost:8080/。运行刚刚创建成功的项目，得到项目的初始界面如下：三、vue项目初始化vue项目初始界面：三、vue项目初始化vue项目初始界面与我们的项目效果相比，有许多不需要的内容，所以先清空这些没用的内容。三、vue项目初始化2、进行项目初始化配置具体操作如下：①删除src

views

AboutView.vue和HomeView.vue这两个文件。三、vue项目初始化2、进行项目初始化配置具体操作如下：②接着在src

views下创建我们自己项目的首页面，比如命名为：homepage.vue三、vue项目初始化2、进行项目初始化配置具体操作如下：③在homepage.vue中输入vue文件最基本的结构：<template>,<script><style>三、vue项目初始化2、进行项目初始化配置具体操作如下：④因为已经删除了views下的home和about文件，所以，需要删除router下index.js中有关这两个文件的路由编码，并为我们自己的页面homePage设置路由。三、vue项目初始化2、进行项目初始化配置具体操作如下：④因为已经删除了views下的home和about文件，所以，需要删除router下index.js中有关这两个文件的路由编码，并为我们自己的页面homePage设置路由重定向。三、vue项目初始化2、进行项目初始化配置具体操作如下：保存运行项目。在页面中显示helloworld!下面可以进一步删除多余的默认样式。三、vue项目初始化2、进行项目初始化配置具体操作如下：⑤在全局根组件app.vue中，删除完多余代码后呈现最最基本的样式。如下所示。三、vue项目初始化2、进行项目初始化配置具体操作如下：再次运行项目，得到最初始的页面。三、vue项目初始化项目初始化小结Vue项目初始化包括如下几步：1、删除views下的两个vue文件2、在views中新建