dajngo3,vue3前端项目搭建,vue项目结构的介绍

前端项目搭建
查看当前node版本

[dalaojun@localhost django_luichun]$ node -v
v14.15.0

查看npm版本

[dalaojun@localhost django_luichun]$ npm -v
6.14.8

查看npm版本

[dalaojun@localhost django_luichun]$ cnpm -v
cnpm@6.1.1 (/home/dalaojun/下载/node-v14.15.0-linux-x64/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.8 (/home/dalaojun/下载/node-v14.15.0-linux-x64/lib/node_modules/cnpm/node_modules/_npm@6.14.8@npm/lib/npm.js)
node@14.15.0 (/home/dalaojun/下载/node-v14.15.0-linux-x64/bin/node)
npminstall@3.28.0 (/home/dalaojun/下载/node-v14.15.0-linux-x64/lib/node_modules/cnpm/node_modules/_npminstall@3.28.0@npminstall/lib/index.js)
prefix=/home/dalaojun/下载/node-v14.15.0-linux-x64 
linux x64 3.10.0-1160.25.1.el7.x86_64 
registry=https://r.npm.taobao.org
[dalaojun@localhost django_luichun]$

查看vue版本

[dalaojun@localhost django_luichun]$ vue --version
@vue/cli 4.5.9

开启一个vue项目,它将会自动打开网站http://localhost:8001

[dalaojun@localhost django_luichun]$ vue ui
?  Starting GUI...
?  Ready on http://localhost:8001

如果已经有项目的将会在网页中显示出来
在这里插入图片描述

显示的路径就时当前创建vue ui的目录（这个是我之间创建的，现在需要修改为一个新的路径，然后创建一个新的vue项目）
在这里插入图片描述

点击在此新建项目
创建一个新的vue项目
在这里插入图片描述

项目名字为vuehtml
选择包管理器为npm
默认开启git初始化仓库

在这里插入图片描述

选择默认vue3语法
点击完下一步将会进行自动安装
在这里插入图片描述

创建完毕之后将会自动显示画面
在这里插入图片描述

如果没有显示，则在选择项目中在下面这个页面中选择
在这里插入图片描述

点击进入项目
进入到插件页面
安装插件
安装vue-router插件，用于管理前端的路由
安装vuex插件，用于管理前端状态
在这里插入图片描述

在这里插入图片描述

点击继续
在这里插入图片描述

在这里插入图片描述

进入任务-serve点击运行，然后再点击输出
nodejs将会把vuecli脚手架服务运行，
点击输出，显示启动的ip端口
在这里插入图片描述

在这里插入图片描述

点击里面的蓝色域名,将会跳转到vue的第一个页面

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.5:8080/

在这里插入图片描述

然后看下vuehtml文件夹打大小，已经有100MB以上了
里面的文件如下

babel.config.js  package.json       public     src
node_modules     package-lock.json  README.md

在这里插入图片描述

node_modules文件夹里面安装了很多依赖库（插件）
在这里插入图片描述

src文件夹里面存放的是前端项目
在这里插入图片描述

目录结构

build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

https://blog.csdn.net/weixin_43043994/article/details/82183343
引用【大橙子额】的解释
src目录结构

assets:	放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件以及其他资源类文件。之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式；
components:	放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为通用组件，避免重复工作；
http:	放置与后台 api 相关的文件。这里面有 axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件；
mixins:	放置混合选项的文件。具体来说，相当于是公用函数的集合，在组件中引用时，可以作用于组件而不必书写重复的方法；
pages:	放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构，再引入通用模块组件，形成完整的页面；
router:	放置路由设置文件，指定路由对应的组件；
store: 放置 vuex 需要的状态关联文件，设置公共的 state、mutations 等；
App.vue:	入口组件，pages 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；
main.js:	入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。

深入一点

node_modules	是一个文件夹，存放管理第三方依赖（当要把本项目发送其他人的时候可以把这个文件夹删除掉）
public	公共文件夹（存放图标，主页，src文件夹里面的内容都是为了public公共文件夹的文件而做的）
favicon.ico	图标（页面最上方的小图标）
index.html	模板主页
src	文件夹
assets	文件夹（存放静态文件）
components	组键的文件夹存放组件组键1 组键2
APP.vue	组键汇集（调用components组键的文件夹里面的组键）
main.js	工程入口
browserslistrc文件	（监控浏览器的版本）
gitignore	（上传git上面忽略的指定文件集和）
babel.config.js	(语法版本控制文件)
package-lock.json	这个package-lock.json 是在 `npm install`时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
package.json	package.json包含了项目的名称，版本号，描述，入口文件，执行脚本，作者，开源协议等。
postcss.config.js	(自动处理css自动前缀的的管理)
README.md	（这个工程的简介）

package-lock.json的介绍可以参考
https://www.cnblogs.com/cangqinglang/p/8336754.html

main.js文件内的介绍
下面是官网的介绍，目前我还没找到相关的介绍
https://v3.cn.vuejs.org/api/application-api.html#component

main.js文件中配置内容

import { createApp } from 'vue'#导入vue的包
import App from './App.vue' #导入src文件夹的App.vue
import router from './router' #导入src文件夹的router文件夹，相当于导入了router文件夹的index.js文件，里面配置着vue-router
import store from './store' #导入src文件夹的store文件夹，相当于导入了store文件夹的index.js文件，里面配置着vuex

createApp(App).use(store).use(router).mount('#app')
#创建App 使用store 使用router 执行(运行在html中的id为#app的div中)
# 上面的(#app)是在public文件夹中的index.html文件的   最下方<div id="app"></div>
#用vue开发的前端项目是一个单面页项目
#所有开发书写的内容都是在这一个div中【<div id="app"></div>】
#每一个书写的页面都不会进行页面跳转【不会触发浏览器的刷新】

下面这个页面是来自App.vue
http://localhost:8080/#/
在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_47021806/article/details/118403833