快速搭建vue-cli项目

tech2026-01-14  13

项目搭建是基于node.js和npm的,所以先安装node.js

下载node.js http://nodejs.cn/download/

扩展: NPM: node package manager,是nodejs的包管理器,安装了nodejs也安装了npm。它允许用户从npm服务器上下载别人编写的第三方包或者命令行程序到本地,也允许用户将自己编写的包或命令行程序上传到npm服务器上供别人使用。 CNPM: 由于npm服务器在国外,经常会出现下载缓慢或者异常,这时cnpm就出现了,阿里巴巴的淘宝团队把npm官网的插件都同步到了在中国的服务器,用户能从这里稳定下载资源,cnpm也是npm的一个插件。 安装方法:在cmd控制台执行 npm install cnpm -g --registry=https://registry.npm.taobao.org, 再执行cnpm -v检查是否安装成功 使用方法:在使用npm指令的时候用cnpm代替即可。

接下来搭建项目

全局安装vue-cli,在命令行窗口执行npm install -g vue-cli
安装成功以后,命令行进入你想放置项目的文件夹执行vue init webpack,依次输入项目信息各项配置等;

扩展1: 命令行进入指定文件夹位置: 方法1:鼠标选中文件夹,按住shift键,右键选择在此处打开powershell窗口/打开命令行窗口; 方法2:打开文件夹,复制上方路径,在命令行窗口输入cd+空格+右键粘贴刚才的路径进入;

扩展2: vue init webpack是以webpack为模板新建项目,首先会下载模板,这个过程中可能会因为网络限制或者连接超时等问题造成下载失败,这时可以手动下载模板。 方法: 1.官网下载模板 https://github.com/vuejs-templates/webpack 或者git clone 2.文件夹更名为webpack 3.将webpack放到.vue-templates目录中。 如果找不到.vue-templates,执行vue init webpack projectname --offline看报错指的位置,如果对应的位置没有.vue-templates文件夹,并且右键新建也不行,就在此处命令行执行makir .vue-templates生成.vue-templates文件夹,再将webpack放到.vue-templates目录中 4.执行vue init webpack projectname --offline,这里vue以webpack为模板离线初始化项目就完成了

命令行进入项目,执行npm install安装依赖
安装依赖成功以后,执行npm run dev运行项目

至此,一个vue项目就搭建成功了!

最新回复(0)