Vue.js基于脚手架编写项目
2019-08-07 17:12
1366 查看
创建Vue项目
[code]npm install -g vue-cli vue init webpack vue_demo cd vue_demo npm install npm run dev 或者npm start
项目结构图
代码编写,在src目录
components自定义组件yy.vue
[code]<template> <div> <p class="msg">{{msg}}</p> </div> </template> <script> export default {// 配置对象(与Vue一致) name: 'yy', data () { // 必须写函数 return { msg: 'hello Vue componet' } } } </script> <style scoped> .msg{ color: red; font-size: 30px; } </style>
app.vue引入模板组件
[code]<template> <div id="app"> <img src="./assets/logo.png"> <!--使用组件标签--> <yy/> </div> </template> <script> // 1、引入组件 import yy from './components/yy.vue' export default { // 2、映射组件标签 components: { yy }, name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
main.js入口函数执行
[code]// 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.vue' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' })
相关文章推荐
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
- 基于Vuejs+Element的注册插件的编写
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue.js结合vue-router和webpack编写单页路由项目
- 基于vue-cli项目bulid后,打开"index.html"页面空白出错显示引用css和js路径错误
- 基于node.js下搭建vue脚手架及制定一个json文件作为api数据源
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue.js学习---脚手架方式搭建vue项目
- Java 开发基于Zookeeper,Spring,vue.js的高并发多用户模块化微信商城系统(一) 项目介绍
- 最新基于Vue.js 2.0的UI组件库快速开发一个Vue.jsWeb应用ElementUI项目实战
- 使用HBuilderX编写第一个Vue项目之js
- 基于vue-cli(vue脚手架)搭建项目
- 搭建vue项目(基于vue-cli脚手架)
- 基于 vue 全家桶的 spa 项目脚手架
- vue.js学习02之vue-cli脚手架创建项目环境搭建
- 基于Vue+package编写项目时遇到的问题
- 安装基于Vue-cli脚手架的Vue项目
- 基于three.js编写的一个项目类示例代码
- Vue.js结合vue-router和webpack编写单页路由项目
- 基于vuejs+Element的注册插件的编写