Environment to build VUE Node.js VSCode template template:
- First install the Node: http://www.runoob.com/nodejs/nodejs-install-setup.html
- Into the command line: win + r ----> cmd
- cd f: \
- md vuetest
- cd vuetest
- Installation webpack: npm install webpack -g
- Installation vue Scaffolding: npm install vue-cli -g
- Create a project: vue init webpack proj
- Use ESLint to lint your code: This is the code warning this is very annoying would be best not
-
- Project directory:
- Installation project dependencies: npm install
- Installation vue routing module vue-router and network requests module vue-resource: cnpm install vue-router vue-resource --save
- Installation elementui: npm install elementui --save
- The mounting vue gridster: npm install vue-power-drag
- Installation echarts: npm install echarts -S
- Installation axios awakened HTTP request:
npm install axios - VSCode follows:
- Meanwhile ctrl_s save the file to start compiling, after compiling complete input browser to http: // localhost: 8080 to see results
- VScode console can also be used npm start compiling ,, after compilation browser to http: // localhost: 8080 to see results
app.vue:
<template>
<div id="app">
<h2>Hello Zhai</h2>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Future', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
index.js:
Import view from 'View'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'
import T123 from '@/components/T123'
import T456 from '@/components/T456'
import T789 from '@/components/T789'
import Slots from '@/components/Slots'
Vue.use(Router)
/* eslint-disable */
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'Test',
component: Test
},
{
path: '/T123',
name: 'T123',
component: T123
},
{
path: '/T456',
name: 'T456',
component: T456
},
{
path: '/T789',
name: 'T789',
component: T789
},
{
path: '/Slots',
name: 'Slots',
component: Slots
}
]
})
main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
Import view from 'View'
import App from './App'
import router from './router'
import Antd from 'ant-design-vue'
amount elk-design-vue / dist / antd.css'
Vue.config.productionTip = false
Vue.use(Antd)
/* eslint-disable no-new */
new view ({
the '#app'
router,
components: { App },
template: '<App/>'
})
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>myvue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>