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

本文主要介绍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的容器中

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

相关文章：