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

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

相关推荐
C澒1 分钟前
微前端容器标准化 —— 公共能力篇:通用监控能力
前端·架构
念念不忘 必有回响2 分钟前
Next.js 14-16 全栈开发实战:从 App Router 核心原理到 Server Actions 深度剖析
前端·nextjs
计算机学姐2 分钟前
基于SpringBoot+Vue的家政服务预约系统【个性化推荐+数据可视化】
java·vue.js·spring boot·后端·mysql·信息可视化·java-ee
英俊潇洒美少年3 分钟前
React 16 → 17 → 18 → 19 完整区别
前端·javascript·react.js
你会发光哎u3 分钟前
了解React并解析JSX语法
前端·react.js·前端框架
专注VB编程开发20年4 分钟前
Typescript就像C#,VS IDE以前对JS只有基础、弱智能的支持
javascript·vscode·microsoft·typescript
533_5 分钟前
[vxe-table el-tree] 树表格:选中子节点,父节点无影响;选中父节点,子节点被选中,el-tree也同理
前端·javascript·vue.js
阳光雨滴6 分钟前
树级结构部门选择和人员选择联动功能处理
javascript·vue.js·elementui
英俊潇洒美少年9 分钟前
Vue2 和 Vue3 所有区别
前端·javascript·vue.js
书到用时方恨少!10 分钟前
基于 Three.js 的 3D 地球可视化项目
开发语言·javascript·3d