Vue.

js
 1. Hello World!
2. Components
3. Écosystème

2
1. Hello World!
https://vimeo.com/247494684
4
5
6
7
8
9
10
11
 2. Components
12
 Import d’un Component
<script> <div>
import MyObjectTable from './MyObjectTable' <my-object-table
:objects="users"
export default { :columns="userColumns"
components: { :is-admin="true"
'my-object-table': MyObjectTable class="user-table">
}, </my-object-table>
... <my-object-table
} :objects="labos"
</script> :columns="laboColumns"
:is-admin="false"
</my-object-table>
</div>
13
14
 Single File Components

15
 Définition d’un Component
<template> <script>
export default {
<input name="query" v-model="searchQuery"
class="form-control" placeholder="Search"> name: 'my-object-table',
props: {
<table> objects: Array,
columns: Array,
<th v-for="key in columns">{{ key | capitalize
isAdmin: Boolean
}}</th>
},
<th v-if="isAdmin">Action</th>
data: {searchQuery: ''},
computed: {
<tr v-for="entry in filteredObjects">
filteredObjects: function () {...}
<td v-for="key in columns">{{entry[key]}}</td>
},
</tr>
filters: {
</table> capitalize: function (str) {...}
}
}
</template>
</script>
16
 3. Écosystème

17
NPM
Node Package Manager: Gestion des paquets javascript

package.json
{
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "latest",
"jquery": "^3.3.1",
"popper.js": "^1.12.9",
"vue": "^2.5.2",
"vue-awesome": "^3.4.0",
"vue-router": "^3.0.1"
},
}

npm install

18
 Vue CLI

Create a new project

vue init webpack mon_projet

mon_projet/
build/
config/
index.html
package.json
README.md
src/
static/

19
WEBPACK

webpack.base.conf.js

module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
},
20
 "devDependencies": {
"autoprefixer": "^7.1.2",

vue-loader
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",

babel-loader
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",

eslint-loader
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",

webpack
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eslint": "^3.19.0",

webpack-dev-middleware
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",

webpack-hot-middleware
"eslint-config-standard": "^6.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.2.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^13.0.4",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.4.2",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},

21
vue-devtools

22
WEBSTORM

IDE avec débogueur

23
 Awesome Vue
A curated list of awesome things related to Vue.js

24