Vue – vue-cli
vue-cli
What is best practice preparing development, staging and production mode?
There are many people to try this.
Vue prepares vue-cli to solve this problem.(Maybe).
Using vue-cli, we can avoid annoying set up build tool.(Maybe)
Ref : vue-cli
Let’s try.
Install and create simple project
npm install --global vue-cli vue --version # show version vue init webpack projectname
projectname is your project name
Install dependencies
cd projectname npm install
Run for dev mode
npm run dev
Build for production
npm run build
If build is success, dist is made under root directory.
|-index.html |- static |- css |- js
main.js
This is root javascript to manage root element on this page.
import Vue from 'vue' // import App from './App' import AppComponent from './components/App/index.vue' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', template: '<AppComponent/>', components: { AppComponent } })
Import Vue and AppComponent(Vue component) from outfile
Of course, we can change component
Single File Component
By default, this style sample is already set. Take a look and check how it works.
App.vue
If you change above import component to App, you can see App
<template> <div id="app"> <img src="./assets/logo.png"> <HelloWorld/> </div> </template> <script> import HelloWorld from './components/HelloWorld' export default { name: 'app', components: { HelloWorld } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
Separate Files for each functionality parts
I look for sample application for vue.(jackfranklin/vue2-demo-proj)
Create components/ directory and each component has following files
- index.vue
- script.js
- style.css
- template.html
To understand each code easily, but there are a lot files.
How to import those files into
index.vue
<template src="./template.html"></template> <script src="./script.js"></script> <style scoped src="./style.css"></style>
script.js
import GithubInput from '../GithubInput/index.vue' import GithubOutput from '../GithubOutput/index.vue' export default { name: 'App', components: { 'github-input': GithubInput, 'github-output': GithubOutput }, data() { return {} } }
style.css
tempalte.html
<div> <p>Hello World</p> <github-input></github-input> <github-output></github-output> </div>