使用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,生成的页面如下图所示:

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

相关推荐
子兮曰3 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭4 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路6 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒7 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
lemon_yyds8 小时前
《vue 2 升级vue3 父组件 子组件 传值: value 和 v-model
vue.js
Kagol8 小时前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉8 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau8 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生8 小时前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼8 小时前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范