快速上手Vue框架--Hello world!(idea配置Web框架Vue)

PS:闲来没事，写点前端玩玩。

1. 准备工作

1. 从node官网下载node.js,直接安装即可

• cmd进入终端输入node -v出现版本号
• 终端输入npm -v出现版本号（npm是一种包管理器，类似python的pip，linux下的apt，yum，拿来下载东西的）
  （上面两步出现版本号就是安装好了）
• 一般来说，还需要用以下命令安装cnpm，国内源版本的npm，以后安装东西用cnpm代替npm会快很多。

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 在终端用以下命令安装脚手架

cnpm install -g @vue/cli

3. 在终端用以下命令打开创建工程的图像界面，在浏览器会显示页面。

vue ui

然后点击“创建”，选择你要存放工程的位置，创建就可以，接着输入项目名字，点击下一步，耐心稍等就好。

出现这个就是项目创建成功了。

2. 配置Idea的Vue开发环境

如果用WebStorm（类似Idea的东西），一款专门的Web JS开发工具直接打开刚刚创建的项目即可，不需要格外配置。

1. 打开刚刚创建好的工程。
   
2. File->Settings->Languages&Frameworks->JavaScript，选择JavaScript language version 设置为ECMAScript 6
3. File->Settings->Plugins，输入Vue.js，进行安装。
4. Run->Edit Configurations,点击+号，选择npm，Name可以写Run，内容的Scripts选择serve，这样就配置好启动入口了。
   
5. 这样点击Run 三角按钮就可以运行了。

3. 程序简要说明

1. main.js是程序入口

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

2.可以看到， mount（挂载）了同级目录下‘./App.vue’这个文件。我注释的内容是初始化加载页面显示的内容，在里面多加一行

hello,world!

。

在Run serve启动程序的情况下，用浏览器查看http://localhost:8080/就可以看到hello world!了。

接着，大家就可以跟着各种Vue教程编写自己的前后端，搭建一个web应用了。