VUE配置

前置要求

node -v >18.0 (低了不一定行)

node 升级

https://blog.csdn.net/klousYG/article/details/115190833

1
2
3
4
5
6
7
8
9
10
11
12
npm install -g n

n latest
n node/23.0.0

$ which node
/usr/local/bin/node

$ vi ~/.bash_profile
export N_PREFIX=/usr/local
export PATH=$N_PREFIX/bin:$PATH
source ~/.bash_profile

vite架构

1
2
3
4
5
6
7
8
9
10
npm create vite@latest
> 项目名称
> vue
> JavaScript

开发

npm install

npm run dev

这里我的npm install 拉不到vite

于是在VPS上面构造了一个初始包 [zip](通过网盘分享的文件：e5.zip
链接: https://pan.baidu.com/s/1T8EkMb130ACt5lAsoQpybw?pwd=1337 提取码: 1337
–来自百度网盘超级会员v2的分享) 下载回主机进而修改

在这个基础上npm install不会有问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
vueviteproject1项目（基于Vite + Vue项目）│
│
├── .vscode/idea 目录。
│　　　├──　v
│　　　├──　v
│　　　└──　v
│
├── node_modules 目录 （vue 项目的文件依赖存放在这个文件夹。）
│　　　├──　所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
│　　　├──　v
│　　　└──　v
│
│
├── public 目录：存放项目公共资源。如网站LOGO等。
│           │     通常我们不需要对public文件夹内的资源做任何修改。
│           │     后续在构建打包时，public内容会直接放到dist文件夹内plugins插件资源；
│　　　├──　v
│　　　├──　v
│　　　└──　v
│
│
├── src  目录 ​：存放 vue 项目的源代码。其下的各个文件（文件夹）分别为：
│　　　├──　assets 目录 ​：资源文件，存放 css，图片等资源。
│　　　├──　​component​ 目录 ​：组件文件夹，存放 vue 的公共组件（核心）
│           │                            （注册于全局，在整个项目中通过关键词便可直接输出）。
│           │
│　　　├──　​​router 目录 ​：用来存放 ​index.js​，用来配置路由，定义各个页面对应的URL。
│　　　├──　​store 目录 ​：组件文件夹，存放 vue 的公共组件
│　　　├──　​​views​ 目录：放主体页面，vue 文件是可以用来充当路由 view 的。
│　　　├──　​tool​：用来存放工具类 js，
│           │                  将 js 代码封装好放入这个文件夹可以全局调用
│           │                  （如api.js​，​http.js​ 是对 http 方法和 api 方法的封装）。
│　　　├──    main.js​：是项目的入口文件，初始化 vue 实例，并引入所需要的插件。
│　　　├──​    app.vue：是项目的主组件，所有页面都是在该组件下进行切换的。
│　　　├──
│　　　└──　v
│
│
├── package.json  存放项目的依赖配置
├── .gitignore。
├── tsconfig.json
├── tsconfig.node.json
├──index.html
└──vite.config.ts

设置内网访问 //vite.config.js

1
2
3
4
5
6
7
8
9
10
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host:'0.0.0.0',
    port:'8000'
  }