vue-cli 脚手架 Command Line Interface

Posted 2021-02-09 tianxiaxuange

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