当前位置：首页 > news >正文

一、vue介绍

news 2025/9/16 21:35:13

一、介绍

vue式前端框架，是一套用于构建用户界面的渐进式框架

1、安装vue

安装node.js（配置环境变量）
https://nodejs.org/en/download/
更换镜像
npm config set registry https://registry.npm.taobao.org
查看镜像
npm config get registry
安装cnpm
npm install -g cnpm
配置cnpm镜像
cnpm config set registry http://registry.npm.taobao.org
安装vue脚手架
cnpm install -g @vue/cli
查看版本信息
vue --version

问题记录：

vue : 无法加载文件 D:\node-v18.14.2-win-x64\node_global\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com
/fwlink/?LinkID=135170 中的 about_Execution_Policies。解决（修改命令行安全策略）：
get-ExecutionPolicy
# 显示Restricted （禁用）
set-ExecutionPolicy RemoteSigned
get-ExecutionPolicy
#显示RemoteSigned

2、创建项目

（1）创建工程

# 项目名称中不可以有大写字母
vue create vue-demoVue CLI v5.0.8
? Please pick a preset: (Use arrow keys)Default ([Vue 3] babel, eslint)       默认3的版本Default ([Vue 2] babel, eslint)       默认2的版本
>  Manually select features			   手动选择
选择手动选择（使用上下切换，使用回车选择）Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel( ) TypeScript	(*) Progressive Web App (PWA) Support( ) Router	路由（导航）( ) Vuex	数据管理( ) CSS Pre-processors() Linter / Formatter	代码规范化（代码格式严格，取消勾选防止误报）( ) Unit Testing( ) E2E Testing使用空格勾选Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and 
? Check the features needed for your project: Babel, PWA
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x2.x选择版本Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and 
? Check the features needed for your project: Babel, PWA
? Choose a version of Vue.js that you want to start the project with 3.x      
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config filesIn package.json配置存放位置Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and 
? Check the features needed for your project: Babel, PWA
? Choose a version of Vue.js that you want to start the project with 3.x      
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n
是否将选项设置为下次预设Vue CLI v5.0.8
✨  Creating project in E:\vsCode\vue\vue-demo.
⚙️  Installing CLI plugins. This might take a while...added 968 packages in 3m
�🚀  Invoking generators...
�📦  Installing additional dependencies...added 18 packages in 2m
⚓  Running completion hooks...�📄  Generating README.md...�🎉  Successfully created project vue-demo.
�👉  Get started with the following command$ cd vue-demo$ npm run serve
已经创建成功

（2）运行项目

进入目录
cd vue-demo
执行项目
npm run serveDONE  Compiled successfully in 6817ms                                                                                                          22:09:17App running at:- Local:   http://localhost:8080/- Network: http://192.168.1.8:8080/Note that the development build is not optimized.To create a production build, run npm run build.成功运行