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

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

相关推荐
+VX:Fegn089514 小时前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·课程设计
半个落月14 小时前
LangChain.js Agent Memory 实战(下):用 Milvus 构建可检索的长期记忆
javascript·langchain
半个落月14 小时前
LangChain.js Agent Memory 实战(上):从内存对话、文件持久化到截断与摘要
javascript·langchain
Nicander15 小时前
我给 Excalidraw 做了一个本地工作区:DrawSpace
前端·开源
linux_cfan17 小时前
17 · 引擎适配器全景:HLS/DASH/Vimeo/Mux/Cast
前端·javascript·音视频
计算机魔术师17 小时前
烧掉2780亿美元还不够?OpenAI的资本豪赌让人头皮发麻
前端
IT_陈寒18 小时前
Java线程池用错参数,我的服务居然悄悄崩溃了
前端·人工智能·后端
卡布鲁18 小时前
React useMemo 与 useCallback 完全指南:原理、场景与避坑
前端·react.js
碳基修炼19 小时前
排查记:本地 devServer 是 http,浏览器却把 302 重定向升级成了 https
前端·http
步行cgn19 小时前
Spring p 命名空间注入详解
java·前端·spring