使用vue-cli脚手架工具搭建vue工程项目以及配置路由

vue-cli是用node编写的命令行工具,我们需要进行全局安装。打开命令行终端,输入如下命令:

|---|----------------------------|
| 1 | $ npm install -g vue-cli |

这里使用的是npm,为了开发的便利,推荐安装cnpm,这样运行指令会更迅速,安装命令如下:

|---|----------------------------------------------------------------------|
| 1 | $ npm install -g cnpm --registry=https:``//registry.npm.taobao.org |

注意:确保node的版本为4.x、5.x及以上。

我们可以使用vue-cli来快速生成一个基于Webpack构建的项目,打开命令行终端,通过cd指令定位到指定的路径下,输入如下命令:

|---|-------------------------------|
| 1 | $ vue init webpack vueExamp |

执行命令后,会有一些命令行交互,我们可以初始化一些项目信息,如下图所示:

项目初始化完成以后,会在当前目录下生成如下目录结构,进入vueExamp目录,安装项目的依赖,执行如下命令:

|---|-----------------|
| 1 | $ npm install |

依赖安装完成以后,来了解一下项目的目录结构:

启动项目,执行如下命令:

|---|-----------------|
| 1 | $ npm run dev |

如果运行中报如下错误:Resolve error: unable to load resolver "node"

执行如下命令:

|---|-------------------------------------------------------------|
| 1 | $ cnpm install --save-dev eslint-``import``-resolver-node |

默认端口号是8080,打开浏览器,输入http://localhost:8080,生成的页面如下图所示:

这样,最基本的框架就已经搭建完毕了,接下来就是配置路由以及编写组件了。

相关推荐
克里斯蒂亚诺更新几秒前
ruoyi切换新版本初始化需要修改的地方
前端·javascript·vue.js
可视之道1 分钟前
基于Meta2d.js的电力系统组态平台实战开发
前端
小村儿22 分钟前
(译文)重温:Karpathy 的 4 条 CLAUDE.md 规则将 Claude 错误率从 41% 降至 11%——历经 30 个代码库后,我又加了 8 条
前端·后端·ai编程
前端那点事25 分钟前
Vite+Vue3环境判断终极解法!区分开发/生产环境,告别环境报错
前端·vue.js
源码集结号27 分钟前
基于 Spring Boot + JPA + MySQL的上门家政系统代码示例
java·前端·后端
爱喝铁观音的谷力景辉30 分钟前
web端实现音频波形分析以及音频截取
前端
前端那点事35 分钟前
别再乱用Vue3路由!useRoute/useRouter传参、跳转、避坑最全实战指南
前端
zithern_juejin41 分钟前
JS的防抖与节流
javascript
ZHIS1 小时前
移动端 Vue3 高清 PDF 预览组件开发:支持手势缩放 + 按钮缩放 + 加载进度
vue.js
candyTong1 小时前
如何写一个可以进化的前端系统验收 SKILL
javascript