码迷,mamicode.com
首页 > 其他好文 > 详细

vue-cli 脚手架 Command Line Interface

时间:2019-02-16 13:57:57      阅读:307      评论:0      收藏:0      [点我收藏+]

标签:http   必须   实现   margin   component   bsp   语法   default   port   

vue-cli 脚手架 Command Line Interface

npm install -g vue-cli        // 全局安装 脚手架

npm init webpack myVue        // 生成项目 工程文件夹 rc - runtime control

build -------- 不是构建项目,而是暴露的 webpack 的配置

config/index.js -------- 可能会根据需要修改

.babelrc -------- babel 的配置 - (多个预设插件包的集合)预设包 presets - 插件包 plugins

"env" ---- 已加入规范的语法

"stage-2" ---- 草案语法

"plugins" ---- 社区语法

eslint* -------- 语法检查

...

index.html -------- 网站首页

<div id="app">

</div>

main.js

import Vue from ‘vue‘

import APP from "./App.vue"

 

new Vue({

el: "#app",

components: {APP},

template: "<App/>"

})

组件: 实现某功能模块的所有资源的集合

App.vue 通常称为“一个组件”

<template>

<div>

{{myVueData}}

<MyComponent/>

</div>

</template>

-----------------------------------------------------------------

<script>

import MyComponent from "./components/MyComponent.vue"        // 1. 引入组件

export default {

name: "App",

conponents: {

MyComponent        // 2. 必须注册组件,才能使用

}

data(){       // 只能使用函数的方式来配置 data

return {

myVueData: "Hello World!"

}

}

}

</script>

-----------------------------------------------------------------

<style scoped>        // 设置 scoped 表示 该样式只在当前组件生效,而不影响其他部分

</style>

5

vue-cli 脚手架 Command Line Interface

标签:http   必须   实现   margin   component   bsp   语法   default   port   

原文地址:https://www.cnblogs.com/tianxiaxuange/p/10387247.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!