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

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

相关推荐
天蓝色的鱼鱼12 小时前
画1万个图形就卡成PPT?试试这款国产高性能2D引擎
前端·javascript
wuxia211812 小时前
用Node.js为网站首页绑定数据
javascript·node.js
云水一下12 小时前
JavaScript 从零基础到精通系列:异步编程与网络请求
前端·javascript
卡卡军12 小时前
🌈 react-sketch-ruler v3 升级之旅:当 React 遇上跨框架标尺引擎
前端·react.js
Asmewill12 小时前
DeepAgents学习笔记三(Backend记忆存储)
前端
Alan Lu Pop12 小时前
前端开发助手
前端·智能体
程序员鱼皮12 小时前
我用 GitHub 仓库养 AI 龙虾,自动开发上线项目!保姆级教程
前端·人工智能·ai·程序员·github·编程·ai编程
276695829213 小时前
京东随机变速滑块拼图验证码识别(京东E卡)
java·服务器·前端·python·京东滑块·京东变速滑块·京东e卡绑卡
এ慕ོ冬℘゜13 小时前
手写生产级 jQuery Toast 轻量提示组件|零插件依赖、动画流畅、极简高
前端·javascript·jquery
Oneslide13 小时前
UI设计-企业OA风格
前端