1、安装vue脚手架
脚手架官方网站:https://cli.vuejs.org/zh/
npm install vue-cli -g // 安装低版本的脚手架【不推荐】
npm install @vue/cli -g // 安装现有版本的脚手架【推荐:对原有的脚手架进行了升级】
// 构建项目的效率更高
// 项目文件结构更加简单明了
2,安装结束,在文件夹地址栏中打开命令提示符窗口,执行命令查看结果
C:\Users\DAMU>vue --version
@vue/cli 4.5.15 # 提示版本信息,说明安装成功
3,执行命令创建vue项目
$ vue create demo01(注:名字自拟,英文,不要出现中文,会报错)
4,添加项目依赖
$ npm install vue-router -S(注:安装时注意单词拼写vue-router 千万不要误写成vue-router)
5、组件分析和创建
创建的项目中包含了布局组件、登录组件以及注册组件;优先实现布局组件登录以及注册之间的跳转
布局组件中又包含了主页组件、商品组件、用户中心组件以及联系我们
6、路由基本组成
一个完成的路由,接受用户通过导航地址发送请求,然后根据映射关系查询到对应的视图组件,在目标展示位置展示视图组件的过程,这个过程专业术语称为路由过程
①导航地址
路由中,导航地址本质上就是超链接,路由组件为了这个导航地址操作比较方便提供了自己的语法
<a href = "#/home">首页</a> <!-- 普通导航地址 -->
<router-link to = "/home">首页</router-link> <!-- 路由组件提供的导航语法,本质上就是超链接 -->
②展示位置
路由中,类似动态组件,需要有一个特定的位置提供给视图进行展示,路由中提供了特定语法
<router-view></router-view>
③映射关系
路由中,需要将用户的请求地址和对应的组件关联起来,项目才能明确的根据用户请求地址查询到对应的组件进行展示,通过路由模块实现
const routes = [
{path:"/main",component:Layout},
{path:"/login",component:Login},
{path:"/reg",component:Register},
]
7、启动项目
$ npm run serve