vue框架搭建步骤详解
最新回答
一念花开
2020-05-27 23:11:24
Vue框架搭建步骤如下：
环境准备- 安装Node.js：访问Node.js官网下载对应系统版本（推荐LTS版本），安装后在终端输入node -v和npm -v验证安装，显示版本号即成功。
- 安装Vue CLI（脚手架）：打开终端，全局安装最新版Vue CLI，命令为npm install -g @vue/cli，也可使用yarn global add @vue/cli。安装后输入vue --version验证，显示版本号即成功。
- 初始化项目：在终端进入目标目录，执行vue create my-vue-project，项目名可自定义且不能含中文。
- 选择配置：推荐选Default (Vue 3) 或 Default (Vue 2) ，新手建议默认；也可自定义配置，按空格勾选特性。
- 进入项目并启动：执行cd my-vue-project进入项目目录，再执行npm run serve启动开发服务器（或yarn serve），浏览器访问http://localhost:8080即可看到默认页面。
在终端输入vue ui，自动打开浏览器界面，按指引创建项目，可视化选择配置，适合新手。
项目目录结构- public/：存放静态资源，如index.html入口页面。
- src/：源代码目录，包含assets/（图片、样式等资源）、components/（可复用Vue组件）、App.vue（根组件）、main.js（入口文件，创建Vue实例）。
- package.json：记录项目依赖和脚本配置。
- npm run serve：启动开发服务器，支持热更新。
- npm run build：打包项目，生成dist目录。
- npm install 包名：安装项目依赖。
- 确保Node.js ≥ v12，避免兼容性问题。
- 全局安装时若报错，Windows用管理员终端，Mac/Linux加sudo。
- npm下载慢可切换淘宝镜像，命令为npm config set registry https://registry.npm.taobao.org。
热门标签
