一、常用命令
#安装vue
npm install vue@next
#初始化vue
npm i -g @vue/cli-init
#进入项目文件夹，创建项目vue_demo
vue init webpack vue_demo
#或使用vite构建项目
npm init vite@latest vue_demo -- --template vue
#启动项目
cd vue_demo
npm install
npm run dev
#构建项目，生成dist目录
npm run build
#打开网址，正常即是成功
http://localhost:8080/#/
#如果使用vite的网址是
http://localhost:3000/
#安装axios
npm install axios
#安装echarts
npm install echarts --save
#打包项目
cnpm run build
#组件库安装
npm install element-plus --save
#vuex安装
npm install vuex --save
npm install vuex@next --save
npm install highlight.js --save
npm install --save @highlightjs/vue-plugin #highlight的vue3依赖插件
npm install --save vue-highlightjs
npm install @element-plus/icons-vue
npm install @antv/x6 --save
npm install vue-router@4
二、centos安装node
wget https://nodejs.org/dist/v16.13.2/node-v16.13.2.tar.gz
tar zxvf node-v16.13.2.tar.gz
./configure --prefix=/usr/local/node/
make
make install
三、nginx部署vue
#安装nginx
https://nginx.org/en/linux_packages.html#RHEL-CentOS
#启动nginx
systemctl restart nginx.service
#vue 文件目录
/etc/nginx/conf.d/dist
#nginx重新加载conf
nginx -s reload
/etc/nginx/conf.d/default.conf
备注：/etc/nginx/conf.d/dist目录就是vue执行npm run build生成的dist目录
server {
listen 8080;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
root /etc/nginx/conf.d/dist;
location / {
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
