创建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

部署前端项目

- 在本地编译 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项目 - 目录结构

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→