网站建设资讯

NEWS

网站建设资讯

vue-router笔记

1、安装vue-cli脚手架

成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、成都网站设计、惠农网络推广、重庆小程序开发、惠农网络营销、惠农企业策划、惠农品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供惠农建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

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 文件,文件包括三部分: