脚手架是基于node的环境。
- nodejs安装
- 脚手架全局安装：在cmd提示命令符中输入 npm i -g @vue/cli
- 检测是否安装成功：安装好后可输入vue -V
- 切换到根目录/项目需要所在目录：在cmd提示命令符中输入 cd /
- 创建一个项目： vue create myvue(名字随意命名，我这里项目命名为 myvue)
这里选第二个，然后等一段时间即可完成
如果你安装在C盘根目录，打开C盘就可以找到myvue文件：
- node_modules 包下载地址
- public 模板和共用文件地址
- src 项目源文件目录
--assets 资源目录
--components 组件存放目录
--App.vue 项目根组件
--main.js 项目入口文件 - .gitignore 规定哪些文件不上传
- babel.confg.js ES6转ES5配置文件
- jscofig.json js语法检测配置
- package.json 项目包管理目录
- package-lock.json 包下载缓存地址
- README.md 项目说明目录
- vue.config.js vue的配置文件
- 切换到项目目录：在提示命令符中输入 cd /myvue
- 运行项目：然后输入 npm run serve
复制链接然后在浏览器打开即可（提示命令符不要关闭）
- singlePageApplication：一个网站的所有页面都集成在一个html文件里面通过切换div模拟页面的切换
- 优点：资源公用；前后端分离；页面切换流畅
- 缺点：对SEO搜索引擎不友好
- 原理：地址改变，不刷新页面，监听地址栏变化实现页面局部更新
- Hash路由：锚点（hash）变化不会刷新页面；window.onhashchange
- 历史记录路由：H5新增特性；history.onpopstate
- 切换到根目录/项目需要所在目录：在cmd提示命令符中输入 cd /
- 创建一个项目： vue create myroute(名字随意命名，我这里项目命名为 myroute)
1.这里选择第三个
2.找到对应选项按空格选中，然后按回车
3.选择第二个
4.这里输入n，然后按回车
5.选第一个按回车
6.选第一个按回车
7.选第一个按回车
8.输入N，按回车，然后等待一段时间即可完成
如果你安装在C盘根目录，打开C盘就可以找到myvue文件：
- 切换到项目目录：在提示命令符中输入 cd /myvue
- 运行项目：然后输入 npm run serve
复制链接然后在浏览器打开即可（提示命令符不要关闭）
- router/index.js 路由配置
- store/index.js 全局数据配置
- views 页面存储地址
---AboutView.vue 关于页面
---HomeView.vue 首页页面 - App.vue 根节点
1.在views文件夹中创建一个页面，如：UserView.vue (名字必须用驼峰式写法)
2.在router/index.js 配置路由
普通路由：
传参路由：
子路由：
子路由页面嵌套（AdminView.vue）：
子路由+子路由页面嵌套 效果：
404页面：
效果：
3.在App.vue中添加链接（导航）
效果：
首页的内容可在views文件夹中的HomeView.vue中修改。
- name名称
- params：路由的参数
- path：地址信息
- fullPath：全地址信息
- hash：哈希值
- query：查询参数
- meta：元信息
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/32146.html