网站建设资讯

NEWS

网站建设资讯

vue-router笔记-创新互联

1、安装vue-cli脚手架

创新互联公司专注于相城企业网站建设,响应式网站开发,商城网站建设。相城网站建设公司,为相城等地区提供建站服务。全流程定制制作,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务
a.下载安装node.js,随包同时也安装了npm;
b.安装vue-cli:npm install vue-cli -g;  //全局安装,只需要安装一次,以后新建其他的项目不用安装了
c.vue init webpack demo  //初始化项目,注意是vue init,而不是npm init(这个是创建package.json文件的)
        先要进入我们项目的安装目录,然后执行下面的操作
d.nmp install  //安装项目依赖包,也就是安装package.json里的包
e.npm run dev  //开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。
f.npm run build  //发布文件,项目根目录生成了dist文件夹,这个文件夹里边就是我们要传到服务器上的文件。

2、vue-router:SPA(单页应用)的路径管理器

☆☆ src/router/index.js,是路由的核心文件,这里面配置路由参数:
引入新增加的路由文件:import Hello from '@/components/Hi'
配置路由名称Hi、路径`/Hi`和对应的组件模板

☆☆ 在src/components目录下,新建 Hi.vue 文件,文件包括三部分: