vue 脚手架搭建项目教程

原创 已于 2025-01-06 14:22:37 修改 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

于 2022-04-03 13:32:29 首次发布
本文介绍了如何通过设置npm源为淘宝镜像来加速包的下载，然后使用cnpm安装Vue.js及vue-cli，创建并初始化Vue项目。在遇到权限问题时，提供了以管理员权限运行PowerShell的解决办法，最后演示了项目编译和运行的步骤，以便在本地预览项目页面。

1 输入命令 npm config set registry https://registry.npmmirror.com

安装淘宝镜像

2输入 cnpm install cnpm -g升级npm命令

 3 安装 vue 输入命令cnpm install vue

4安装cnpm install --global vue-cli 

环境安装完成 

5 vue init webpack "项目名称"

如果遇到一下问题

无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，

 

管理员身份运行PowerShell（命令提示符，来源于Linux的命令提示符也叫Shell）

 执行：set-ExecutionPolicy RemoteSigned

6 vue init webpack "项目名称"

输完后一直按回车

 等待项目搭建完毕

输入 cnpm install

    cnpm run dev

项目编译完毕后

打开浏览器输入

localhost:8080就可以看到项目页面
 

最全vue脚手架搭建教程
suny8的专栏
06-23 1322
Vue CLI是一个基于Vue.js进行快速开发的完整系统，可以自动生成Vue.js+ webpack的项目模板。Vue CLI提供了强大的功能，用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli3.x版本可以通过 vue create 命令快速创建一个新项目的脚手架，不需要像vue2.x那样借助于webpack来构建项目。
Vue脚手架搭建以及创建Vue项目流程
热门推荐
weixin_68658847的博客
04-25 3万+
Vue脚手架的创建以及用脚手架创建项目的全套流程
vue脚手架搭建项目（详细教程）
weixin_65855560的博客
06-19 1万+
vue的自动化构建工具是node.js帮我们做的，这就是我们为什么要下载node的原因。npm install < name > --save：安装的同时，将信息写入package.json中，项目路径中若是有。Vue脚手架指的是vue-cli，它是一个快速构建**单页面应用程序（SPA）**环境配置的工具）命令行界面。npm list：查看当前目录下已安装的node包。npm ls：查看当前目录下已安装的node包。npm -v：查看npm安装的版本。：是一个开源的前端打包工具。1.进入终端执行命令。
【Vue2手录11】Vue脚手架（@vue_cli）详解（环境搭建+项目开发示例）
最新发布
qq_45925548的博客
09-12 1201
Vue 脚手架环境搭建指南 核心需求：Vue 脚手架（@vue/cli）解决手动搭建项目的痛点，包括依赖管理复杂、配置繁琐、开发体验差等问题，提供一键初始化能力。 环境准备： 安装 Node.js（LTS 版本）并配置环境变量 验证安装：node -v 和 npm -v 显示版本号 关键工具： npm：用于安装管理前端依赖 package.json：项目说明书，记录依赖和脚本 package-lock.json：锁定依赖版本保证一致性 脚手架安装使用： 全局安装：npm install -g @vue/cl
vue脚手架搭建
qq_42401946的博客
04-19 781
安装node.js Vue脚手架自带配置： 安装Vue脚手架，通过Vue脚手架创建项目 配置router路由，vuex，scss 第三方ui库： 配置Element-UI组件库 请求接口： 配置axios库 一、 安装node，vscode 二、 全局安装脚手架vue-cli 链接：https://cli.vuejs.org/zh/guide/creating-a-project.html 命令：npm install -g @vue/cli 三、 选择项目存放路径，创建一个项目 命令：vue crea.
Vue脚手架项目构建
laotouzi001的博客
09-21 424
Vue 脚手架项目的创建
Vue脚手架搭建项目
weixin_44529746的博客
10-31 326
vue-cli 2.0项目搭建 确保当前环境是否支持node和npm C:\Users\65107>node -v v12.16.1 C:\Users\65107>npm -v 6.13.4 全局安装vue 语法：npm install vue -g C:\Users\65107>npm install vue -g + vue@2.6.11 added 1 package from 1 contributor in 29.298s 全局安装vue的脚手架工具 vu..
vue脚手架搭建项目及vue学习
06-06
在"vue脚手架搭建项目及vue学习"的主题中，我们将深入探讨如何使用Vue CLI（命令行接口）来初始化一个项目，以及Vue的核心概念和关键特性。 1. **Vue CLI的使用**： Vue CLI是一个官方提供的强大脚手架工具，用于...
vue脚手架搭建项目的兼容性配置详解
12-12
使用vue-cli搭建项目，面临着解决ie兼容性问题(ie9+)，因为ie浏览器并不支持es6语法等。 首先安装babel-polyfill，解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js...
vue脚手架搭建项目
weixin_34129145的博客
09-25 213
2019独角兽企业重金招聘Python工程师标准>>> ...
【vue】脚手架的搭建项目
Assassin108的博客
02-23 194
1. template :视图组件，相当于html标签,它下面只能有一个根元素,也就是不能写成。components: 组件，公共组件（最终会被别的页面级组件引入或者被更大的组件引入拼凑成大组件）1. 脚手架安装指令：npm install -g @vue/cli ---全局安装，只需要装一次。App.vue:单页面项目开发所有页面的主入口vue文件。4.package.json : 项目构建所依赖的包。main.js: src文件夹的入口文件。5. vue.config.js:vue相关配置。
vue脚手架（cli）项目搭建
dawfwafaew的博客
02-26 446
vue脚手架（cli）项目搭建，保姆教程
vue使用脚手架搭建项目
weixin_45328041的博客
05-03 451
1、安装vue全局脚手架 npm i @vue/cli -g 2、开始搭建项目 vue create 项目名称 3、选择第二个手动选择功能 4、按空格选中TS，其他你可以自配项 5、一路按回车 6、在这个选项问你是否将其保存为将来项目的预置，看个人需求吧 7、加载完成之后会有提示，根据提示分别执行cd vue 在执行npm run serve,创建成功 ...
Vue.js脚手架搭建项目
一宿君
12-23 370
一、node环境 首先下载node.js 官网下载：https://nodejs.org/en/ 安装步骤，除了安装路径最好修改下到D盘，其他无脑操作next即可！ 安装好之后，在cmd或者VsCode中终端均可查看是否安装成功，如果显示版本号，即安装成功。 二、Vue脚手架 1.全局安装脚手架:vue-cli 安装方式：npm(常用) npm i vue-cli -g 此命令只需运行一次，安装上之后就不用再安装了！ 2.安装vue指令 npm install vue 安装完成，查看vue版本 vue
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值