vue.js如何实现单页面应用-创新互联
这篇文章主要介绍vue.js如何实现单页面应用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
神池ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!一:npm的安装
由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功。
测试node的版本号:node -v
测试npm的版本号:npm -v
以上提示代表安装成功
二:vue.js环境搭建
1、首先安装淘宝的npm镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org
2、安装vue.js环境::cnpm install -g vue-cli
3、测试vue的安装:vue
三:vue.js项目的建立
新建一个名为pt的vue项目:在F盘创建一个名为pt的文件夹:执行:cd f:\ vue init webpack pt
接下来会依次出现以下的操作
注:Use ESlint to lint your code-是否使用ESlint(最后选否,否则不熟悉这种严格的方式,会被坑惨,没空格会报错,多空格也会报错)
vue项目的启动步骤:(1)cd pt (2)npm install (3)npm run dev
最终的目录结构:
四:创建一个vue实例
main.js:应用入口文件
App.js:初始化组件
例:我们要实现如下效果的一个网站
有四个模块:首页、公司介绍、招贤纳士、易点咨询。
项目的思维导向图:
1、配置入口文件main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' // 引入router路由 import Router from 'vue-router' // 引入项目的四个模块组件 import introduce from './components/introduce' import home from './components/home' import employment from './components/employment' import consult from './components/consult' // 使用router Vue.use(Router) // 定义路由 var routes = [{ path: '/home', component: home }, { path: '/introduce', component: introduce }, { path: '/employment', component: employment }, { path: '/consult', component: consult }] // 实例化路由 var vueRouter = new Router({ routes }) // 创建和挂载根实例 new Vue({ el: '#app', router: vueRouter, template: '', components: { App } })
2、初始化组件App.vue开发
3、创建公用头部组件
4、创建其他组件
需注意模板文件都只能有一个根元素。
公司介绍zx
像这种情况会报错。
正确的为:
公司介绍
以上是“vue.js如何实现单页面应用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享标题:vue.js如何实现单页面应用-创新互联
分享链接:http://scyanting.com/article/dohpsh.html