1.环境建设

使用vue-cli脚手架工具构建

安装vue-cli

Npm install -g vue-cli使用vue-cli初始化项目

Vue init demo1进入目录

光盘演示1安装依赖关系

Npm安装开始运行

npm运行开发浏览器访问http://localhost:8080

1.首先，将打开主页，这是我们看到的index.html文件

2.使用webpack打包后，默认情况下加载main.js文件，并将其引入index.html文件

二.发展

相关模块和组件可以在main.js中介绍

从“vue”导入vue，从“导入应用程序”。/app“从导入路由器”。/router//路由器目录在这里介绍。默认情况下，它会识别内部的index.js文件(它不能是其他名称)。//引入并使用vue-resource网络请求模块从‘vue-resource’vue导入vue资源。使用(vue资源)实例化vue对象配置选项路由和呈现App组件

New Vue({ el: '#App '，//这里绑定了index.html App id的div元素路由器，render 3360h=h(App)//这里render: h=h(App)写在es6。//转换后可以理解为暂时渲染app组件//render 33366//})；})App.vue文件是我们的组件门户，然后所有的开发都在这里进行

模板div id='app' div class='nav '！-使用路由器链接组件进行导航。-!-通过传入“到”属性来指定链接。-!-默认情况下，路由器链接将呈现为“a”标记-ul lir out-link to='/home ' home/router-link/Li lir out-link to='/about ' about/router-link/Li/ul/div class=' main '！-路由匹配的组件将在此呈现-router-view/router-view/div/div/templatescriptexportdefault { name : ' app '，components 3360 } }/script style body { background-color 3360 # f8f 8 ff；font-family: 'Avenir '，Helvetica，Arial，无衬线；color : # 2c 3e 50；}.nav{ position:固定；宽度： 108 px；left: 40px}.nav ul { list-style : none；margin : 0；padd : 0；}.nav ul li { width: 108px高度： 48px；线高： 48px；border:1px实心# dadada文本对齐：中心；}.nav ul阿利{ text-decoration:无；}.main { height: 400px左边距left: 180px右边距： 25px；}/style要使用路由，首先要在router/index.js文件中创建路由并配置路由映射，通过export将路由器导出到main.js文件中

//负责写线路图，方便管理

从' @/components/Home '导入Home从' vue-router ' vue . use(vue router)//创建路由实例并配置路由映射const router=new vue router({ mode : ' history '，routes3360 [{path:'/'，name:' home '，component: home }，{path:'/'，name: ' about '，component: about }，]})//输出routere上面配置了两个组件映射，即Hme.vue组件和About组件。配置后，我们可以开始使用路由

！-使用路由器链接组件进行导航。-!-通过传入“到”属性来指定链接。-!-默认情况下，路由器链接将呈现为“a”标记-ul路由器链接到='/home ' home/路由器链接/Li路由器链接到='/about ' about/路由器链接/Li/ul！-路由匹配的组件会在这里渲染-router-view /router-view点击home和about导航会映射到对应的组件，然后在/router-view这里渲染组件，整个过程已经完成。

接下来，我们使用vue-resource网络插件来动态加载和显示数据

1.安装插件

Npm安装vue-资源保存2 2。在main.js文件中介绍和使用vue-resource网络请求模块

从“vue-resource”vue导入vue资源。使用(vue资源)3。创建主页组件

我们需要在创建的钩子函数中请求网络。这里我们使用豆瓣的API来请求电影列表数据。请求成功后，我们在页面上显示它的数据

模板div class=' home ' h1 { { msg } }/h1 ul Li v-for=' articles in articles ' div class=' m-img inl-block ' img v-bind : src=' http : article。图像。small '/div class=' m-content inl-block ' div { { article。title } }/div年份：{{article.year}}/div类型：{ { article。子类型} }/div/div/Li/ul/div/模板脚本//已安装钩子函数这里去请求豆瓣数据导出默认{ name: 'home '，data () { return { msg: '电影列表，articles:[] } }，created:function(){ //这里安装好的和创造生命周期函数区别这个$ http。jsonp(' https://API。豆瓣。com/v2/movie/250强？count=10 '，{}，{ headers: {，仿真器： true }).然后（函数（响应){ //这里是处理正确的回调console.log(响应);这个。文章=回应。数据。题材//这个。文章=回应。数据['主题']也可以},函数（响应){ //这里是处理错误的回调控制台。log(response)})；} }/脚本！-添加《scopedia》属性以将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件-样式scopedia { list-style : none；保证金： 0；padd : 0；} ul Li {边框-底部： 1px实心# 999；padd : 10px 0；}.inl-block { display : inline-block；}.m-img{ } .间位内容{左边距： 20px}/style4、最后查看运行结果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。