├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── ProductList
    │   │   ├── Readme.MD
    │   │   ├── products.js
    │   │   └── ProductList.vue
    │   └── TopBar
    │   │   └── TopBar.vue
    ├── main.js
    └── App.vue
├── .gitignore
├── README.md
└── package.json


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/teambit/bit-vue-tutorial/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/teambit/bit-vue-tutorial/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/ProductList/Readme.MD:
--------------------------------------------------------------------------------
1 | # Product List
2 | 
3 | This file is an example file for a component readme. 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/components/ProductList/products.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |     {
 3 |       name: 'Phone XL',
 4 |       price: 799,
 5 |       description: 'A large phone with one of the best screens'
 6 |     },
 7 |     {
 8 |       name: 'Phone Mini',
 9 |       price: 699,
10 |       description: 'A great phone with one of the best cameras'
11 |     },
12 |     {
13 |       name: 'Phone Standard',
14 |       price: 299,
15 |       description: ''
16 |     }
17 |   ];


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # bit-vue-tutorial
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 | 
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


--------------------------------------------------------------------------------
/src/components/TopBar/TopBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |     <a>
 4 |         <h1>My Store</h1>
 5 |     </a>
 6 |     <a class="button fancy-button"><i class="material-icons">shopping_cart</i>Checkout</a>
 7 | </div>
 8 | </template>
 9 | 
10 | <style>
11 | 
12 | #top-bar {
13 |   width: 100%;
14 |   height: 68px;
15 |   background-color: #1976d2;
16 |   padding: 16px;
17 |   display: flex;
18 |   flex-direction: row;
19 |   justify-content: space-between;
20 |   align-items: center;
21 | }
22 | 
23 | #top-bar h1 {
24 |   color: white;
25 |   margin: 0;
26 | }
27 | 
28 | </style>
29 | 
30 | <script>
31 | export default {
32 |     name: 'TopBar'
33 | }
34 | </script>
35 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" type="image/x-icon" href="favicon.ico" />
 8 |     <link
 9 |       href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 |       rel="stylesheet"
11 |     />
12 |     <title>bit-vue-tutorial</title>
13 |   </head>
14 |   <body>
15 |     <noscript>
16 |       <strong>We're sorry but bit-vue-tutorial doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
17 |     </noscript>
18 |     <div id="app"></div>
19 |     <!-- built files will be auto injected -->
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bit-vue-tutorial",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.4",
12 |     "vue": "^2.6.11"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "^4.2.3",
16 |     "@vue/cli-plugin-eslint": "^4.2.3",
17 |     "@vue/cli-service": "^4.2.3",
18 |     "babel-eslint": "^10.1.0",
19 |     "eslint": "^6.8.0",
20 |     "eslint-plugin-vue": "^6.2.2",
21 |     "vue-template-compiler": "^2.6.11"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "rules": {},
33 |     "parserOptions": {
34 |       "parser": "babel-eslint"
35 |     }
36 |   },
37 |   "postcss": {
38 |     "plugins": {
39 |       "autoprefixer": {}
40 |     }
41 |   },
42 |   "browserslist": [
43 |     "> 1%",
44 |     "last 2 versions"
45 |   ],
46 |   "bit": {
47 |     "env": {
48 |       "compiler": "bit.envs/bundlers/vue@2.6.18"
49 |     },
50 |     "componentsDefaultDirectory": "components/{name}",
51 |     "packageManager": "npm"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/components/ProductList/ProductList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h2>Products</h2>
 4 |         <template v-for="(product, index ) of products">
 5 |             <div v-bind:key={index}> 
 6 |                 <h3>
 7 |                     <a>
 8 |                         {{ product.name }}
 9 |                     </a>
10 |                 </h3>
11 |                 <p v-if="product.description">
12 |                     Description: {{ product.description }}
13 |                 </p>
14 |                 <button @click="share">
15 |                     Share
16 |                 </button>
17 |             </div>
18 |         </template>
19 |     </div>
20 | </template>
21 | 
22 | 
23 | <script>
24 | 
25 | import products from './products';
26 | 
27 | export default {
28 |   name: 'ProductList',
29 |   data() {
30 |     return {products};
31 |   },
32 |   methods: {
33 |       share(){
34 |           alert('The product has been shared!')
35 |       }
36 |   }
37 | }
38 | </script>
39 | 
40 | <style>
41 | #product-list {
42 |   padding: 0 16px;
43 | }
44 | 
45 | .button, button {
46 |   display: inline-flex;
47 |   align-items: center;
48 |   padding: 8px 16px;
49 |   border-radius: 2px;
50 |   font-size: 14px;
51 |   cursor: pointer;
52 |   background-color: #1976d2;
53 |   color: white;
54 |   border: none;
55 |   margin: 4px;
56 | }
57 | 
58 | .button:hover, button:hover {
59 |   opacity: 0.8;
60 |   font-weight: normal;
61 | }
62 | 
63 | .button:disabled, button:disabled {
64 |   opacity: 0.5;
65 |   cursor: auto;
66 | }
67 | 
68 | </style>
69 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <TopBar id="top-bar"/>
  4 |     <ProductList id="product-list"/>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | import TopBar from './components/TopBar/TopBar.vue'
 10 | import ProductList from './components/ProductList/ProductList.vue'
 11 | 
 12 | export default {
 13 |   name: 'app',
 14 |   components: {
 15 |     TopBar, ProductList
 16 |   }
 17 | }
 18 | </script>
 19 | 
 20 | <style>
 21 | 
 22 | * {
 23 |   font-family: 'Roboto', Arial, sans-serif;
 24 |   color: #616161;
 25 |   box-sizing: border-box;
 26 |   -webkit-font-smoothing: antialiased;
 27 |   -moz-osx-font-smoothing: grayscale;
 28 | }
 29 | 
 30 | body {
 31 |   margin: 0;
 32 | }
 33 | 
 34 | .container {
 35 |   display: flex;
 36 |   flex-direction: row;
 37 | }
 38 | 
 39 | /* Text */
 40 | 
 41 | h1 {
 42 |   font-size: 32px;
 43 | }
 44 | 
 45 | h2 {
 46 |   font-size: 20px;
 47 | }
 48 | 
 49 | h1, h2 {
 50 |   font-weight: lighter;
 51 | }
 52 | 
 53 | p {
 54 |   font-size: 14px;
 55 | }
 56 | 
 57 | /* Hyperlink */
 58 | 
 59 | a {
 60 |   cursor: pointer;
 61 |   color: #1976d2;
 62 |   text-decoration: none;
 63 | }
 64 | 
 65 | a:hover {
 66 |   opacity: 0.8;
 67 | }
 68 | 
 69 | /* Input */
 70 | 
 71 | input {
 72 |   font-size: 14px;
 73 |   border-radius: 2px;
 74 |   padding: 8px;
 75 |   margin-bottom: 16px;
 76 |   border: 1px solid #BDBDBD;
 77 | }
 78 | 
 79 | label {
 80 |   font-size: 12px;
 81 |   font-weight: bold;
 82 |   margin-bottom: 4px;
 83 |   display: block;
 84 |   text-transform: uppercase;
 85 | }
 86 | 
 87 | /* Button */
 88 | 
 89 | 
 90 | /* Fancy Button */
 91 | 
 92 | .fancy-button {
 93 |   background-color: white;
 94 |   color: #1976d2;
 95 | }
 96 | 
 97 | .fancy-button i.material-icons {
 98 |   color: #1976d2;
 99 |   padding-right: 4px;
100 | }
101 | 
102 | /* Top Bar */
103 | 
104 | 
105 | </style>
106 | 


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