首页天道酬勤搭建vue项目流程,创建vue2项目

搭建vue项目流程,创建vue2项目

张世龙 05-05 18:46 85次浏览

本文主要介绍vue的第一个尝试——项目结构方面的知识。 有需要的朋友请参考

创建新项目后,请查看项目的目录结构

几个主要文件的内容

index.html文件(门户文件,系统进入后先进入index.html ) )。

可以检索blog main.js文件(导入适当的模块) improtvuefrom'vue ) /从脚手架下载的模块,并可以直接使用new实例化vue对象

improt App from './App '

Vue.config.productionTip=false

newvue({

el:'#app ',//当前vue控制的容器是谁,获取的此容器元素是谁,#app是index.thml中的id=“app”

template: ',//模板可以写相应的p,如果有根标记,也可以写组件调用的标记

要调用组件: { app }//组件,必须在组件中注册该组件。 此处的APP来自引入的./App文件,即App.vue文件

() )

App.vue文件(根组件)

导出默认值{

name: 'App '

}

# APP

字体系列: ' avenir ',Helvetica,Arial,sans-serif;

微信字体智能: antialiased;

- moz-OS x-font-smoothing : gray scale;

文本对齐3360中心;

color: #2c3e50;

margin-top: 60px;

}

路由器文件夹下的index.js文件(前端路由) import Vue from 'vue )。

导入路由器自' vue-router '

导入importhelloworldfrom ' @/components/hello world '//模板文件

VUE.use(router ) ) ) ) ) ) ) ) )。

导出默认新路由器({ (

routes: [ //定义相应模板的路径,并对应于包含url的模板

{

path: '/',

name: 'HelloWorld ',

组件:健康世界

}

]

() )

模板:

template可以使用它包含一些内容。 它本身不会实际渲染到dom中。 可以直接使用template标签包含。 注意: template有根标记,只有一个根标记。

行为:

在import中与其他组件关联,导出默认值{

name: 'App ',

组件: {

职业介绍所世界

}

注册后可以立即调用。

样式:

和普通的css风格一样。 可以使用sass语法,但请在项目中安装sass。 安装成功后,将显示与package.json对应的信息

项目加载过程

项目启动: index.html---- main.js---- app.vue

借助index.html条目文件,他运行main.js文件,main.js实例化我们的Vue对象,然后运行App.vue组件。 成为App.vue后,如果模板中有内容,也可以将模板的内容插入到index.html的容器中

上面是我给大家整理的,希望以后对大家有帮助。

相关文章:

vue项目目录结构介绍,vue框架简介