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