DC's blog DC's blog
首页
  • 计算机基础
  • linux基础
  • mysql
  • git
  • 数据结构与算法
  • axure
  • english
  • docker
  • opp
  • oop
  • 网络并发编程
  • 不基础的py基础
  • 设计模式
  • html
  • css
  • javascript
  • jquery
  • UI
  • 第一次学vue
  • 第二次学vue
  • Django
  • drf
  • drf_re
  • 温故知新
  • flask
  • 前后端不分离

    • BBS
    • 订单系统
    • CRM
  • 前后端部分分离

    • pear-admin-flask
    • pear-admin-django
  • 前后端分离

    • 供应链系统
  • 理论基础
  • py数据分析包
  • 机器学习
  • 深度学习
  • 华中科大的网课
  • cursor
  • deepseek
  • 杂文
  • 罗老师语录
  • 关于我

    • me
  • 分类
  • 归档
GitHub (opens new window)

DC

愿我一生欢喜,不为世俗所及.
首页
  • 计算机基础
  • linux基础
  • mysql
  • git
  • 数据结构与算法
  • axure
  • english
  • docker
  • opp
  • oop
  • 网络并发编程
  • 不基础的py基础
  • 设计模式
  • html
  • css
  • javascript
  • jquery
  • UI
  • 第一次学vue
  • 第二次学vue
  • Django
  • drf
  • drf_re
  • 温故知新
  • flask
  • 前后端不分离

    • BBS
    • 订单系统
    • CRM
  • 前后端部分分离

    • pear-admin-flask
    • pear-admin-django
  • 前后端分离

    • 供应链系统
  • 理论基础
  • py数据分析包
  • 机器学习
  • 深度学习
  • 华中科大的网课
  • cursor
  • deepseek
  • 杂文
  • 罗老师语录
  • 关于我

    • me
  • 分类
  • 归档
GitHub (opens new window)
  • html

  • css

  • javascript

  • jquery

  • UI库

  • 第一次学vue

  • 第二次学vue

    • vue语法基础
    • 创建vite项目
      • 环境准备
      • 创建项目
      • Vite项目 - 目录结构
        • css全局局部
        • 运作轨迹
        • 目录的作用
    • vue-router
    • pinia组件
    • cookie组件
    • axios组件
  • 前端
  • 第二次学vue
DC
2025-01-03
目录

创建vite项目

# 环境准备

- 安装node.js
  - 注:要使用vite创建项目,node的版本必须大于18.0
    - https://nodejs.org/en/download/
    - https://nodejs.org/dist/
  - node.js就是一个javascript解释器 类似于 python解释器
  - 我们可以 node code.js 执行一个js文件, 就类似于 python3 code.py 执行python文件!
  - npm是node的包管理工具,类似于python的pip包管理工具
    - npm install xxx     > 在当前项目下会自动创建一个node_modeules目录,安装的依赖包会刚到该位置
    - npm install xxx -g  > 安装的依赖包会放到 npm -g 输出的目录下
    - 当我们执行node code.js时,若code.js有第三方依赖包,会优先在当前项目的node_modeules目录下找,没有再去全局找!!
  - 查看npm的配置的下载源 npm config get registry
    - 切换到默认的官方源(慢) npm config set registry https://registry.npmjs.org/
    - 切换到推荐的其他源(快) npm config set registry=https://registry.npmmirror.com
1
2
3
4
5
6
7
8
9
10
11
12
13

# 创建项目

终端创建项目 + webstorm进行项目开发.. (推荐)
(最新的webstorm也可以创建vite项目, vscode也可以进行前端项目开发, 看自己喜好诺)

- 通过终端命令创建vite项目(该命令执行后,会一路提醒,比较友好) 
  > npm create vue@latest  最简单的就是输入项目名后,一路否
  > cd 项目
  > sudo npm install  会在项目下自动创建node_modeules目录,安装依赖包; 相当于pip install -r requirements.txt 
  > sudo npm run dev  就可在本地浏览器看到效果
1
2
3
4
5
image-20250102175049414
  • 部署前端项目
- 在本地编译 npm run build > 会在项目下生成一个dist文件夹
- 将dist放到服务器上
- 服务器安装nginx,并配置nginx文件
  - yum install nginx -y
  - vim /etc/nginx/nginx.conf  
    > 最关键的就是server部分里编写这行指令 root dist文件夹所在路径 比如root /data/dist;
    > nginx启动起来就会自动去dist下找index.html
- 启动nginx 
  systemctl start nginx
  systemctl restart nginx
- 查看效果
1
2
3
4
5
6
7
8
9
10
11

# Vite项目 - 目录结构

image-20250102172524713

index.html -- main.js -- App.vue
App.vue的template部分的代码会自动加载到index.html中id为app的标签中.

import {createApp} from 'vue'  >> 从vue这个包里的读取index.js文件,并拿到里面的createApp
import App from './App.vue'    >> VUE导入组件的写法
1
2

# css全局局部

★ PS: 截图中注释掉的import './assets/main.css' 是 导入全局的css样式..
在每个组件里, <style scoped>表明只在当前组件生效; 所以 应用到所有组件的css可扔到 全局css里!!

# 运作轨迹

左侧是引入js文件+vue语法的方式,右侧是vite创建的项目

引入js文件+vue语法的方式 一个html文件就搞定了! vite项目也是从index.html作为切入口:
- 右侧index.html中的js文件是通过模块导入的方式拆分到main.js中了
- 左侧导入的是vue文件; 右侧main.js导入的是vue包
- 左侧createApp(),括号里是一个字典; 右侧createApp(App)里,App是一个组件
- App组件包含三个部分: template、script、style
  - template里的内容会自动加载到index.html中的 <div id='app'></div> 里.
  - script因为标明了setup,与左侧相比,不用写setup函数,也不用return这些变量、函数了.
  
相当于App组件里的template、script、style都加载到了index.html中对应的位置!! (目前而言,只有一个页面)
1
2
3
4
5
6
7
8
9

# 目录的作用

vite项目的其他目录是做什么的?

- package.json   项目依赖
- vite.config.js 相当于Django的settings.py配置文件  注意里面的@,配置了一个路径
- dist           是项目打包自动生成的
- public和src/assets 都是放静态文件的!
  - public 中放固定的,比如第三方的,bulid打包时,不会对其进行编译,原本是咋样的就咋样出现在dist里
  - src/assets 中放自己写的静态资源文件, 若有多个css、多个js,在bulid编译的时候都会处理到一个css、一个js中
- src/components 里面通常可以放一些通用的组件,以实现复用!!
1
2
3
4
5
6
7

vue语法基础
vue-router

← vue语法基础 vue-router→

最近更新
01
deepseek本地部署+知识库
02-17
02
实操-微信小程序
02-14
03
教学-cursor深度探讨
02-13
更多文章>
Theme by Vdoing | Copyright © 2023-2025 DC | One Piece
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式