vue项目的创建和遇到的一些问题


创建vue项目的时候,直接在HBuilder X里创建会没有router目录,要从cmd里创建。

创建一个vue项目

执行  vue init webpack my-project    注意(my-project)是自己的项目名

回车既可,等待加载配置

注意y表示yes,n表示no

? Project name ( my-project ) 敲y, 回车既可

?project description ( A Vue.js project ) 敲回车既可

?Author ( xxxxxx xxxxx@xx.com ) 敲回车既可

? Vue build ( user arrow Keys ) 敲回车既可

? Install vue-router?(Y/n)敲Y回车既可 (是否安装路由)

?Use ESLint to lint your code? (Y/n) 敲n回车既可(是否安装路由)

?Set up unit tests (Y/n) 敲n回车既可 ( 单元测试, 个人觉得不安装选择n )

?Setup e2e tests with Nighwatch?(Y/n) (  e2e测试,个人觉得不安装选择n )

?Should we run npm install for you after the project has been created? (recommended) (use arrow Keys)

这里是选择安装方式

等待安装即可

npm run dev 运行
使用webpack创建vue项目时,会提示:install vue-router?(Y/N),下面讲一下区别:

首先说一下路由是做什么的?

构建 SPA (单页应用) 时,方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器,它渲染的组件是你使用vue-router指定的。

1、安装vue-router:

项目的src目录下会多出一个router文件夹,且App.vue的内容是这样的:

多出一对 标签,router-view标签主要是将路由路径所指定的组件渲染到页面中,此时可以将所有的路由路径写在router文件夹里的index.js里,实现在url上输入不同的路径从而渲染不同的组件。

2、不安装vue-router
项目的src目录下会没有router文件夹,且App.vue的内容是这样的:

如果要实现上面的路由的话,需要先使用npm install vue-router --save安装vue-router到node-modules,此时可以把路

由路径写入mian.js里,或者重新建立router文件夹,但需要修改App.vue里的内容,添加

标签。

原文链接:https://blog.csdn.net/style_zyh/article/details/74321612

vue router中hash和history
坑:路径没错但是加载不出来?漏掉#!默认hash,没有#加载不出来!
在routes前一行补上 mode:'history',


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM