环境搭建 VUE Node.js VSCode template模板：

  1. 首先安装node：http://www.runoob.com/nodejs/nodejs-install-setup.html
  2. 进入命令行模式： win+r ---->cmd
  3. cd  f:\
  4. md vuetest
  5. cd vuetest
  6. 安装webpack：npm install webpack -g
  7. 安装vue脚手架：npm install vue-cli -g
  8. 创建项目：vue init webpack proj
    • Use ESLint to lint your code：这个是代码警告提示这个很烦人的建议最好不要
      1. 项目目录：
  9. 安装项目依赖：npm install
  10. 安装 vue 路由模块vue-router和网络请求模块vue-resource：cnpm install vue-router vue-resource --save
  11. 安装elementui：npm install element-ui --save
  12. 安装vue的gridster：npm install vue-power-drag
  13. 安装echarts：npm install echarts -S
  14. 安装axios惊醒HTTP请求：npm install axios
  15. VSCode下：
    1. ctrl_s 保存文件的同时开始编译， 编译完成后在浏览器输入http://localhost:8080即可查看结果
    2. 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>

小白学习VUE第二课：环境搭建 VUE Node.js VSCode template模板的更多相关文章

  1. 十、.net core（.NET 6）搭建ElasticSearch(ES)系列之Java环境搭建和Node.js环境搭建

    安装java jdk环境:我此处使用的是jdk16版本.下载地址: https://www.oracle.com/java/technologies/javase-jdk16-downloads.ht ...

  2. 【springmvc笔记】第二课 环境搭建和第一个springmvc例子

    1. 开发工具准备 eclipse + jdk1.7 spring-framework-4.3.9.RELEASE 2. 新建Dynamic Web Project项目,命名为springmvc. 3 ...

  3. 前端开发 Vue -1windows环境搭建Vue Node开发环境

    解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...

  4. vue环境配置脚手架环境搭建vue工程目录

    首先在初始化一个vue项目之前,我们需要下载node.js,并且安装! 下载地址: nodejs.cn/download 安装完成之后,windows+r 运行命令 cmd  输入node -v  检 ...

  5. 深度学习（TensorFlow）环境搭建：（二）Ubuntu16.04+1080Ti显卡驱动

    前几天把刚拿到了2台GPU机器组装好了,也写了篇硬件配置清单的文章——<深度学习(TensorFlow)环境搭建:(一)硬件选购和主机组装>.这两台也在安装Ubuntu 16.04和108 ...

  6. MyBatis学习系列一之环境搭建

    目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 学习一个新的知识,首先做一个简单的例子使用一下,然后再逐步深入.MyBat ...

  7. Hadoop学习笔记(3)——分布式环境搭建

    Hadoop学习笔记(3) ——分布式环境搭建 前面,我们已经在单机上把Hadoop运行起来了,但我们知道Hadoop支持分布式的,而它的优点就是在分布上突出的,所以我们得搭个环境模拟一下. 在这里, ...

  8. 深度学习（TensorFlow）环境搭建：（三）Ubuntu16.04+CUDA8.0+cuDNN7+Anaconda4.4+Python3.6+TensorFlow1.3

    紧接着上一篇的文章<深度学习(TensorFlow)环境搭建:(二)Ubuntu16.04+1080Ti显卡驱动>,这篇文章,主要讲解如何安装CUDA+CUDNN,不过前提是我们是已经把N ...

  9. Nutch1.7学习笔记：基本环境搭建及使用

    Nutch1.7学习笔记:基本环境搭建及使用 作者:雨水,时间:2013-10-31博客地址:http://blog.csdn.net/gobitan 说明:Nutch有两个主版本1.x和2.x,它们 ...

随机推荐

  1. 洛谷P2602 [ZJOI2010]数字计数 题解 数位DP

    题目链接:https://www.luogu.com.cn/problem/P2602 题目大意: 计算区间 \([L,R]\) 范围内 \(0 \sim 9\) 各出现了多少次? 解题思路: 使用 ...

  2. tomcat 介绍及环境搭建

    一.tomcat介绍 Tomcat 服务器是一个免费的开放源代码的 Web 应用服务器,属于轻量级应用服务器,在中小型 系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试 JSP 程序的首选. ...

  3. 【记】Linux下安装JDK1.7

    Java官网已经不提供除最新版本以外版本的JDK下载了,下载JDK1.7,密码: rsqg 本地Linux系统为Centos6.9,本身就没安装Java:已安装Java需要先卸载,卸载方法请百度. 1 ...

  4. java实现阿里云短信服务发送验证码

    由于做项目的时候遇到了接第三方短信服务,所以记录一下. 一.新建一个maven项目并导入相关依赖 <!--手机发送短信验证码--> <dependency> <group ...

  5. 分享一款基于aui框架的图文发布界面

    本文出自APICloud官方论坛, 感谢论坛版主 川哥哥 的分享. 分享一款基于aui框架的图文发布界面,可以添加多张图可以删除,类似qq空间发布说说,没做服务器后端,只演示前端操作.需要用到UIMe ...

  6. cogs 1001. [WZOI2011 S3] 消息传递 Tarjan

    1001. [WZOI2011 S3] 消息传递 ★★   输入文件:messagew.in   输出文件:messagew.out   简单对比时间限制:1 s   内存限制:128 MB Prob ...

  7. 深入理解协程（四）：async/await异步爬虫实战

    本文目录: 同步方式爬取博客标题 async/await异步爬取博客标题 本片为深入理解协程系列文章的补充. 你将会在从本文中了解到:async/await如何运用的实际的爬虫中. 案例 从CSDN上 ...

  8. DP-直线分割递推

    在 DP  里有一类是直线分割平面的问题 , 也是属于递推 类的 . 一 . 直线分割平面的问题 先考虑第一个小问题 : n 条直线最多可以将平面分割成几部分 ? 想想 最优的分割方法是怎样的呢 ? ...

  9. Redis常用命令详细介绍

    一.字符串 字符串键是Redis最基本的键值对类型,将一个单独的键和一个单独的值关联起来.通过字符串键,不仅可以存储和读取字符串,如果输入能被解释为整数和浮点数,还能执行自增或自减操作. 1.SET: ...

  10. Codeforces Choosing Laptop 题解

    这题实在是太水了,具体看注释 蒟蒻的方法是一边找过时的电脑一边比大小 蒟蒻不才,只会C++ 其实还会free basic,但它已经过时了 附: 本题洛谷网址 Codeforces网址 希望蒟蒻的题解能 ...