vue-install.sh vue安装脚本
!/bin/bash
退出时清理可能的问题
set -e
trap 'echo "安装过程中出现错误，请检查日志"; exit 1' ERR
定义颜色
GREEN='\033[0;32m'
BLUE='\033[0;34m'
YELLOW='\033[0;33m'
RED='\033[0;31m'
NC='\033[0m' # No Color
显示标题
echo -e "\({BLUE}======================================\){NC}"
echo -e "${BLUE} Vue.js 安装助手脚本 v1.0 \({NC}"
echo -e "\){BLUE}======================================${NC}"
检查是否以root权限运行
if [ "$EUID" -ne 0 ]; then
echo "请以root权限运行此脚本"
exit 1
fi
检查Node.js是否已安装
if ! command -v node &> /dev/null; then
echo "✗ 未检测到Node.js"
echo "正在为您安装Node.js..."
安装Node.js 18.x版本
echo "安装Node.js 18.x版本..."
curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
apt-get install -y nodejs
验证安装
NODE_VERSION=$(node -v)
echo "✓ Node.js \(NODE_VERSION 安装成功"
else
NODE_VERSION=\)(node -v)
echo "✓ 检测到Node.js版本: $NODE_VERSION"
fi
检查npm是否已安装
if ! command -v npm &> /dev/null; then
echo "✗ 未检测到npm"
echo "正在安装npm..."
apt-get install -y npm
echo "✓ npm已安装"
else
NPM_VERSION=$(npm -v)
echo "✓ 检测到npm版本: $NPM_VERSION"
fi
安装Vue CLI
echo "正在安装Vue CLI..."
npm install -g @vue/cli
验证Vue CLI安装
VUE_VERSION=$(vue --version)
echo "✓ Vue CLI $VUE_VERSION 安装成功"
提供一些帮助信息
echo ""
echo ""
echo "Vue.js 安装完成！"
echo ""
echo "您可以使用以下命令创建一个新的Vue项目:"
echo " vue create my-project"
echo ""
echo "进入项目目录后，可以运行开发服务器:"
echo " cd my-project"
echo " npm run serve"
echo "======================================"
检查包管理器
check_package_manager() {
if command -v npm &> /dev/null; then
PACKAGE_MANAGER="npm"
echo -e "\({GREEN}✓ 使用npm作为包管理器\){NC}"
elif command -v pnpm &> /dev/null; then
PACKAGE_MANAGER="pnpm"
echo -e "\({GREEN}✓ 使用pnpm作为包管理器\){NC}"
elif command -v yarn &> /dev/null; then
PACKAGE_MANAGER="yarn"
echo -e "\({GREEN}✓ 使用yarn作为包管理器\){NC}"
elif command -v bun &> /dev/null; then
PACKAGE_MANAGER="bun"
echo -e "\({GREEN}✓ 使用bun作为包管理器\){NC}"
else
PACKAGE_MANAGER="npm"
echo -e "\({YELLOW}! 未检测到包管理器，默认使用npm\){NC}"
fi
}
检查网络访问选项
check_network_access() {
echo -e "\n\({BLUE}设置网络访问选项:\){NC}"
echo "1) 仅本地访问 (localhost)"
echo "2) 允许外网访问 (0.0.0.0)"
read -p "请选择 [1-2，默认1]: " network_option
if [ "\(network_option" == "2" ]; then
echo -e "\){GREEN}✓ 设置为允许外网访问\({NC}"
NETWORK_HOST="0.0.0.0"
# 获取本机IP地址
IP_ADDR=\)(hostname -I | awk '{print \(1}')
echo -e "\){GREEN}本机IP地址: \({IP_ADDR}\){NC}"
echo -e "\({YELLOW}项目启动后可通过 http://\)IP_ADDR:5173 访问\({NC}"
else
echo -e "\){GREEN}✓ 设置为仅本地访问${NC}"
NETWORK_HOST="localhost"
fi
}
显示安装选项
show_options() {
echo -e "\n\({BLUE}请选择Vue.js安装方式:\){NC}"
echo "1) 创建Vue.js项目 (使用create-vue脚手架)"
echo "2) 从CDN使用Vue.js (无需构建工具)"
echo "3) 使用Docker安装Vue.js (容器化环境)"
echo "4) 单页面HTML/JS示例 (快速学习使用)"
echo "5) 退出"
read -p "请选择 [1-5]: " option
case \(option in
1) create_vue_project ;;
2) use_vue_from_cdn ;;
3) use_vue_with_docker ;;
4) create_vue_sample ;;
5) echo "安装已取消"; exit 0 ;;
*) echo -e "\){RED}无效选项${NC}"; show_options ;;
esac
}
选项1: 创建Vue.js项目
create_vue_project() {
echo -e "\n\({BLUE}=== 创建Vue.js项目 ===\){NC}"
获取项目名称
read -p "项目名称: " project_name
if [ -z "$project_name" ]; then
project_name="vue-project"
echo "使用默认项目名称: $project_name"
fi
检查目录是否存在
if [ -d "\(project_name" ]; then
echo -e "\){YELLOW}警告: 目录 '\(project_name' 已存在\){NC}"
read -p "是否继续? (y/n): " continue_install
if [[ ! "\(continue_install" =~ ^[Yy]\) ]]; then
echo "安装已取消"
exit 0
fi
fi
检查网络访问选项
check_network_access
echo -e "\n\({BLUE}使用 create-vue 创建项目...\){NC}"
echo -e "\({YELLOW}提示: 将询问您是否需要各种功能，如TypeScript、路由等\){NC}"
echo -e "\({YELLOW}如果不确定，可直接按Enter选择默认值(No)\){NC}\n"
case $PACKAGE_MANAGER in
npm) npm create vue@latest $project_name ;;
pnpm) pnpm create vue@latest $project_name ;;
yarn)
if yarn --version | grep -q "^1."; then
yarn create vue $project_name
else
yarn create vue@latest $project_name
fi
;;
bun) bun create vue@latest $project_name ;;
esac
安装依赖并启动
echo -e "\n\({BLUE}安装依赖并启动开发服务器...\){NC}"
cd $project_name
case \(PACKAGE_MANAGER in
npm)
npm install
echo -e "\n\){GREEN}✓ 依赖安装完成!\({NC}"
echo -e "\){BLUE}启动开发服务器...\({NC}"
echo -e "\){YELLOW}您可以按Ctrl+C停止服务器${NC}"
npm run dev -- --host \(NETWORK_HOST
;;
pnpm)
pnpm install
echo -e "\n\){GREEN}✓ 依赖安装完成!\({NC}"
echo -e "\){BLUE}启动开发服务器...\({NC}"
echo -e "\){YELLOW}您可以按Ctrl+C停止服务器${NC}"
pnpm run dev -- --host \(NETWORK_HOST
;;
yarn)
yarn
echo -e "\n\){GREEN}✓ 依赖安装完成!\({NC}"
echo -e "\){BLUE}启动开发服务器...\({NC}"
echo -e "\){YELLOW}您可以按Ctrl+C停止服务器${NC}"
yarn dev --host \(NETWORK_HOST
;;
bun)
bun install
echo -e "\n\){GREEN}✓ 依赖安装完成!\({NC}"
echo -e "\){BLUE}启动开发服务器...\({NC}"
echo -e "\){YELLOW}您可以按Ctrl+C停止服务器${NC}"
bun run dev --host $NETWORK_HOST
;;
esac
}
选项2: 从CDN使用Vue.js
use_vue_from_cdn() {
echo -e "\n\({BLUE}=== 从CDN使用Vue.js ===\){NC}"
read -p "示例文件保存位置 [默认: ./vue-cdn-example]: " output_dir
if [ -z "$output_dir" ]; then
output_dir="./vue-cdn-example"
fi
mkdir -p "$output_dir"
选择API风格
echo -e "\n\({BLUE}选择API风格:\){NC}"
echo "1) 选项式API (Options API)"
echo "2) 组合式API (Composition API)"
read -p "请选择 [1-2]: " api_style
检查网络访问选项
check_network_access
创建HTML文件
if [ "\(api_style" == "1" ]; then cat > "\)output_dir/index.html" << 'EOF'
Vue.js CDN示例 - 选项式API
计数器: {{ count }}
输入内容:
您输入的内容: {{ message }}
Vue.js CDN示例 - 组合式API
计数器: {{ count }}
输入内容:
您输入的内容: {{ message }}
创建ES Module版本
if [ "\(api_style" == "1" ]; then cat > "\)output_dir/index-esm.html" << 'EOF'
Vue.js ES Module示例 - 选项式API
计数器: {{ count }}
输入内容:
您输入的内容: {{ message }}
Vue.js ES Module示例 - 组合式API
计数器: {{ count }}
输入内容:
您输入的内容: {{ message }}
创建README.md
cat > "$output_dir/README.md" << EOF
Vue.js CDN示例
这个目录包含两个示例文件:
- `index.html` - 使用全局构建版Vue.js的基本示例
- `index-esm.html` - 使用ES Module构建版Vue.js的示例
如何运行
由于ES模块的安全限制，这些文件需要通过HTTP服务器来访问。
您可以使用以下命令启动一个简单的HTTP服务器:
```bash
如果已安装Node.js
npx serve${NETWORK_HOST == "0.0.0.0" ? " --listen 0.0.0.0" : ""}
或者如果已安装Python
python -m http.server${NETWORK_HOST == "0.0.0.0" ? " --bind 0.0.0.0" : ""}
```
然后在浏览器中访问:\({NETWORK_HOST == "0.0.0.0" ? "\n- http://\)IP_ADDR:5000/index.html\n- http://$IP_ADDR:5000/index-esm.html" : "\n- http://localhost:5000/index.html\n- http://localhost:5000/index-esm.html"}
学习更多
访问 Vue.js官方文档 了解更多信息。
EOF
echo -e "\n${GREEN}✓ 示例文件已创建在 \(output_dir 目录\){NC}"
echo -e "\({YELLOW}请注意: 由于ES模块的安全限制，这些文件需要通过HTTP服务器来访问\){NC}"
echo -e "\({BLUE}您可以运行以下命令启动一个简单的HTTP服务器:\){NC}"
if [ "$NETWORK_HOST" == "0.0.0.0" ]; then
echo -e " cd $output_dir && npx serve --listen 0.0.0.0"
echo -e " 或"
echo -e " cd \(output_dir && python -m http.server --bind 0.0.0.0"
echo -e "\){GREEN}服务器启动后可通过 http://\(IP_ADDR:5000 访问\){NC}"
else
echo -e " cd $output_dir && npx serve"
echo -e " 或"
echo -e " cd $output_dir && python -m http.server"
fi
询问是否要启动服务器
read -p "是否现在启动HTTP服务器? (y/n): " start_server
if [[ "\(start_server" =~ ^[Yy]\) ]]; then
cd "\(output_dir"
if command -v npx &> /dev/null; then
echo -e "\){BLUE}启动HTTP服务器...\({NC}"
echo -e "\){YELLOW}按Ctrl+C停止服务器\({NC}"
if [ "\)NETWORK_HOST" == "0.0.0.0" ]; then
npx serve --listen 0.0.0.0
else
npx serve
fi
elif command -v python3 &> /dev/null; then
echo -e "\({BLUE}启动HTTP服务器...\){NC}"
echo -e "\({YELLOW}按Ctrl+C停止服务器\){NC}"
if [ "\(NETWORK_HOST" == "0.0.0.0" ]; then
python3 -m http.server --bind 0.0.0.0
else
python3 -m http.server
fi
elif command -v python &> /dev/null; then
echo -e "\){BLUE}启动HTTP服务器...\({NC}"
echo -e "\){YELLOW}按Ctrl+C停止服务器\({NC}"
if [ "\)NETWORK_HOST" == "0.0.0.0" ]; then
python -m http.server --bind 0.0.0.0
else
python -m http.server
fi
else
echo -e "\({RED}未找到可用的HTTP服务器工具\){NC}"
echo "请安装Node.js或Python，然后手动启动服务器"
fi
fi
}
选项3: 使用Docker安装Vue.js
use_vue_with_docker() {
echo -e "\n\({BLUE}=== 使用Docker安装Vue.js ===\){NC}"
检查Docker是否已安装
if ! command -v docker &> /dev/null; then
echo -e "\({RED}✗ Docker未安装\){NC}"
echo "请先安装Docker: https://docs.docker.com/get-docker/"
exit 1
fi
if ! command -v docker-compose &> /dev/null; then
echo -e "\({RED}✗ Docker Compose未安装\){NC}"
echo "请先安装Docker Compose: https://docs.docker.com/compose/install/"
exit 1
fi
echo -e "\({GREEN}✓ Docker已安装\){NC}"
获取项目目录
read -p "项目目录 [默认: ./vue-docker-project]: " project_dir
if [ -z "$project_dir" ]; then
project_dir="./vue-docker-project"
fi
mkdir -p "$project_dir"
检查网络访问选项
check_network_access
创建Dockerfile
cat > "$project_dir/Dockerfile" << 'EOF'
FROM node:18
WORKDIR /app
RUN npm install -g @vue/cli
EXPOSE 8080
EXPOSE 5173
CMD ["bash"]
EOF
创建docker-compose.yml
cat > "$project_dir/docker-compose.yml" << EOF
version: '3'
services:
vue-app:
build: .
volumes:
- ./:/app
ports:
- "8080:8080"
- "5173:5173"
environment:
- HOST=0.0.0.0
tty: true
stdin_open: true
EOF
创建启动脚本
cat > "$project_dir/create-vue-project.sh" << 'EOF'
!/bin/bash
echo "创建新的Vue.js项目..."
docker-compose run --rm vue-app vue create -y .
docker-compose run --rm vue-app npm install
EOF
chmod +x "$project_dir/create-vue-project.sh"
cat > "$project_dir/start-dev-server.sh" << EOF
!/bin/bash
echo "启动开发服务器..."
docker-compose run --rm --service-ports vue-app npm run serve -- --host \(NETWORK_HOST
EOF
chmod +x "\)project_dir/start-dev-server.sh"
cat > "$project_dir/build.sh" << 'EOF'
!/bin/bash
echo "构建生产版本..."
docker-compose run --rm vue-app npm run build
EOF
chmod +x "$project_dir/build.sh"
创建README.md
cat > "$project_dir/README.md" << 'EOF'
Vue.js Docker项目
这是一个使用Docker管理Vue.js开发环境的项目。
使用方法
创建Vue.js项目
./create-vue-project.sh
启动开发服务器
./start-dev-server.sh
构建生产版本
./build.sh
访问应用
开发服务器启动后，访问 http://localhost:8080
构建输出
构建后的文件会在 ./dist 目录下
EOF
echo -e "\n${GREEN}✓ Docker项目已创建在 \(project_dir 目录\){NC}"
echo -e "\({BLUE}使用以下命令开始:\){NC}"
echo -e " cd $project_dir"
echo -e " ./create-vue-project.sh"
echo -e " ./start-dev-server.sh"
询问是否现在创建项目
read -p "是否现在创建Vue.js项目? (y/n): " create_now
if [[ "\(create_now" =~ ^[Yy]\) ]]; then
cd "\(project_dir"
echo -e "\){BLUE}构建Docker镜像...${NC}"
docker-compose build
echo -e "\({BLUE}创建Vue.js项目...\){NC}"
./create-vue-project.sh
echo -e "\({BLUE}启动开发服务器...\){NC}"
echo -e "\({YELLOW}按Ctrl+C停止服务器\){NC}"
./start-dev-server.sh
fi
}
选项4: 创建单页面示例
create_vue_sample() {
echo -e "\n\({BLUE}=== 创建Vue.js单页面示例 ===\){NC}"
read -p "保存位置 [默认: ./vue-sample.html]: " output_file
if [ -z "$output_file" ]; then
output_file="./vue-sample.html"
fi
检查网络访问选项
check_network_access
cat > "$output_file" << 'EOF'
Vue.js 单页面示例
待办事项
{{ todo.text }}
没有待办事项
<input
type="text"
v-model="newTodo"
@keyup.enter="addTodo"
placeholder="添加新的待办事项..."
>
<button @click="addTodo">添加
<button
@click="currentFilter = 'all'"
:class="{ active: currentFilter === 'all' }"
>
全部
<button
@click="currentFilter = 'active'"
:class="{ active: currentFilter === 'active' }"
>
未完成
<button
@click="currentFilter = 'completed'"
:class="{ active: currentFilter === 'completed' }"
>
已完成
计数器
当前计数: {{ count }}
<button @click="count++">+1
<button @click="count--">-1
Vue.js基础语法示例
文本绑定
{{ message }}
条件渲染
<button @click="toggleVisible">{{ isVisible ? '隐藏' : '显示' }}
现在你看到我了!
列表渲染
{{ item }}
事件处理
<button @click="sayHello">点击我
echo -e "\n${GREEN}✓ Vue.js单页面示例已创建: \(output_file\){NC}"
echo -e "\({BLUE}您可以在浏览器中直接打开此文件来查看效果\){NC}"
询问是否在浏览器中打开或启动服务器
echo -e "\n\({BLUE}如何打开文件:\){NC}"
echo "1) 直接在浏览器中打开 (仅支持简单功能)"
echo "2) 使用HTTP服务器打开 (完全功能支持)"
read -p "请选择 [1-2]: " open_method
if [ "\(open_method" == "2" ]; then # 获取文件目录 file_dir=\)(dirname "$output_file")
echo -e "\({BLUE}启动HTTP服务器...\){NC}"
if command -v npx &> /dev/null; then
cd "\(file_dir"
echo -e "\){YELLOW}按Ctrl+C停止服务器\({NC}"
if [ "\)NETWORK_HOST" == "0.0.0.0" ]; then
echo -e "\({GREEN}可以通过 http://\)IP_ADDR:5000/\((basename "\)output_file") 访问\({NC}"
npx serve --listen 0.0.0.0
else
echo -e "\){GREEN}可以通过 http://localhost:5000/\((basename "\)output_file") 访问\({NC}"
npx serve
fi
elif command -v python3 &> /dev/null; then
cd "\)file_dir"
echo -e "\({YELLOW}按Ctrl+C停止服务器\){NC}"
if [ "\(NETWORK_HOST" == "0.0.0.0" ]; then
echo -e "\){GREEN}可以通过 http://\(IP_ADDR:8000/\)(basename "\(output_file") 访问\){NC}"
python3 -m http.server --bind 0.0.0.0
else
echo -e "\({GREEN}可以通过 http://localhost:8000/\)(basename "\(output_file") 访问\){NC}"
python3 -m http.server
fi
elif command -v python &> /dev/null; then
cd "\(file_dir"
echo -e "\){YELLOW}按Ctrl+C停止服务器\({NC}"
if [ "\)NETWORK_HOST" == "0.0.0.0" ]; then
echo -e "\({GREEN}可以通过 http://\)IP_ADDR:8000/\((basename "\)output_file") 访问\({NC}"
python -m http.server --bind 0.0.0.0
else
echo -e "\){GREEN}可以通过 http://localhost:8000/\((basename "\)output_file") 访问\({NC}"
python -m http.server
fi
else
echo -e "\){RED}未找到可用的HTTP服务器工具\({NC}"
echo "请安装Node.js或Python，然后手动启动服务器"
fi
elif command -v xdg-open &> /dev/null; then
read -p "是否在浏览器中打开? (y/n): " open_browser
if [[ "\)open_browser" =~ [1]$ ]]; then
xdg-open "\(output_file"
fi
elif command -v open &> /dev/null; then
read -p "是否在浏览器中打开? (y/n): " open_browser
if [[ "\)open_browser" =~ [2]$ ]]; then
open "$output_file"
fi
fi
}
主程序
main() {
检查包管理器
check_package_manager
显示安装选项
show_options
echo -e "\n\({GREEN}安装完成!\){NC}"
echo -e "\({BLUE}访问 https://vuejs.org/guide/introduction.html 了解更多信息\){NC}"
}
执行主程序
main
浙公网安备 33010602011771号