vue cli 脚手架安装

本文指导如何升级Vue CLI版本,解决升级问题,并深入解析项目结构,包括node_modules、src、router等关键文件夹。
  •  安装
    • npm install -g vue-cli
    • vue init webpack vue_demo(自定义项目名称)
    • cd vue_demo 切换到项目目录中
    • npm run dev 启动项目
    • 更高版本 版本升级后
      • 解决问题方式1:
        • 卸载原有的 vue-cli 2.9.6 npm uninstall vue-cli
        • 安装高版本的 vue-cli 5.0.1 npm install @vue/cli
      • 解决问题方式2:
        • 直接升级vue-cli 版本 npm update -g @vue/cli
  •  项目结构说明
    • |---node_moudule == 项目中安装的依赖模块
    • |---src == 源码位置 开发目录
    • |---main.js == 打包编译的入口文件
    • |---App.vue == 项目页面入口文件、vue组件
    • |---components == 当前项目的公共子组件目录
    • |---views == 路由组件 -- 当前项目的其他组件
    • |---assets == 资源文件夹 一般放一些静态资源
    • |---router == 当前项目的路由文件
    • |---store == 当前项目的状态文件
    • |---public == 纯静态资源
    • |---index.html == 入口模块文件
    • |---babel.config.js == babel配置文件
    • |---gitnore == 用来过滤一些版本控制的文件
    • |---package.json == 项目文件,记载一些命令和依赖还有简要的项目描述信息
    • |---README.md == 介绍自己项目 ,可参照github 中star多的项目
    • |---vue.config.js == vue实例配置文件
### 一、Vue CLI 脚手架安装教程 在开始安装 Vue CLI 脚手架之前,需要确保系统已经正确安装了 Node.js 和 npm。以下是详细的安装步骤: #### 1. 环境准备 确保 Node.js 和 npm 已经正确安装。可以通过以下命令检查版本: ```bash node -v npm -v ``` 如果未安装 Node.js 或 npm,可以从官网下载并安装[^2]。 #### 2. 安装 Vue CLI 使用 npm 全局安装 Vue CLI: ```bash npm install -g @vue/cli ``` 安装完成后,可以通过以下命令验证是否安装成功: ```bash vue --version ``` 如果显示版本号,则说明安装成功[^1]。 #### 3. 创建第一个 Vue 脚手架项目 通过以下命令创建一个新的 Vue 项目: ```bash vue create my-project ``` 在执行上述命令时,系统会提示选择预设配置或手动配置插件。根据需求选择即可。 #### 4. 启动开发服务器 进入项目目录并启动开发服务器: ```bash cd my-project npm run serve ``` 启动成功后,可以在浏览器中访问 `http://localhost:8080` 查看项目运行效果[^1]。 --- ### 二、常见问题与解决方案 #### 1. 安装速度慢 由于 npm 默认源在国外,可能会导致安装速度较慢。可以切换为国内镜像源以加速安装: ```bash npm config set registry https://registry.npmmirror.com ``` 验证是否切换成功: ```bash npm config get registry ``` 如果需要恢复默认源,可以执行以下命令: ```bash npm config set registry https://registry.npmjs.org/ ``` #### 2. 使用 cnpm 替代 npm 为了进一步提升安装速度,可以选择安装 cnpm: ```bash npm i -g cnpm --registry=https://registry.npmmirror.com ``` 之后可以通过 cnpm 替代 npm 进行安装: ```bash cnpm install -g @vue/cli ``` --- ### 三、注意事项 - 在安装 Vue CLI 时,确保网络环境稳定,避免因网络问题导致安装失败。 - 如果系统中已安装旧版本的 Vue CLI(如 vue-cli 2.x),建议先卸载旧版本再安装新版本: ```bash npm uninstall -g vue-cli npm install -g @vue/cli ``` - Vue CLI 自动配置 Webpack,简化了繁琐的手动配置过程,同时解决了版本兼容性问题。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

重塑这战争

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值