vue-cli 脚手架 Command Line Interface

mac

sudo npm install -g nrm

sudo npm config -g set unsafe-perm

sudo npm install webpack@3.0.0 -g

sudo npm install --global webpack-cli

sudo npm install --global vue-cli

vue-cli 脚手架 Command Line Interface

使用管理员身份运行 "命令行提示符"

1. npm install --global webpack

2. npm install --global webpack-cli        // 参考

npm install -g vue-cli        // 全局安装 脚手架,如果安装不了就使用： 3. npm install --global vue-cli

4. vue init webpack my-vue        // 生成项目 工程文件夹 npm run dev 启动项目

简写 "rc" ----的意思是----- runtime control

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

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

webpack.base.conf.js        // 可以修改项目入口文件 main.js

5. autoOpenBrowser: true,        // 启动项目后自动打开浏览器

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

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

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

"plugins" ---- 社区语法

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

.eslintignore -------- 对指定文件或文件夹下的指定文件不做检查

*.js

*.vue

.eslintrc.js

// 关闭检查 0、开启检查 1警告级别，开启检查2错误级别

// /* eslint-disable no-new */        // 告诉编译器下面这行是正确的

rules:{

'indent': "off",

no-unused-vars: 0

}

...

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>

项目发包 serve dist