环境搭建 VUE Node.js VSCode template模板：
- 首先安装node：http://www.runoob.com/nodejs/nodejs-install-setup.html
- 进入命令行模式： win+r ---->cmd
- cd f:\
- md vuetest
- cd vuetest
- 安装webpack：npm install webpack -g
- 安装vue脚手架：npm install vue-cli -g
- 创建项目：vue init webpack proj
- Use ESLint to lint your code：这个是代码警告提示这个很烦人的建议最好不要
-
- 项目目录：
- 安装项目依赖：npm install
- 安装 vue 路由模块vue-router和网络请求模块vue-resource：cnpm install vue-router vue-resource --save
- 安装elementui：npm install element-ui --save
- 安装vue的gridster：npm install vue-power-drag
- 安装echarts：npm install echarts -S
- 安装axios惊醒HTTP请求：
npm install axios - VSCode下：
- ctrl_s 保存文件的同时开始编译， 编译完成后在浏览器输入http://localhost:8080即可查看结果
- VScode console中使用 npm start 也可以编译，， 编译完成后在浏览器输入http://localhost:8080即可查看结果
app.vue:
<template>
<div id="app">
<h2>Hello Zhai</h2>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</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>
index.js:
import Vue from 'vue'
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 Vue from 'vue'
import App from './App'
import router from './router'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false
Vue.use(Antd)
/* eslint-disable no-new */
new Vue({
el: '#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>