一、安装vue及依赖

执行npm命令安装webpack

npm install webpack -g

再安装vue

npm install vue vue-cli -g

二、创建vue项目

创建vue项目必须能够访问互联网，因为创建vue项目的过程中需要下载vue的模板。

vue init webpack vue001

等待下载vue的模板，然后会等等用户做一些选择，全部回车即可，然后开始下载项目的依赖，等待项目创建完成。

cd vue001

npm run dev

扫描二维码关注公众号，回复： 6514652 查看本文章

打开浏览器，输入 http://localhost:8080 即可访问刚刚创建的vue001项目的界面了，如下图所示

三、安装vscode

vscode现在几乎是开放vue的标配IDE开发环境，是微软贡献的免费试用的开源IDE，下载地址 https://code.visualstudio.com/ ，下载后直接安装即可（建议开发环境下的任何路径都不要带空格）。

修改Tab Size 为 2：

菜单 File > Preference > Settings，在User页签将Editor: Tab Size 改为 2

四、修改项目vue001

启动vscode，点击菜单 File > Open Folder... 选择前面创建的vue001项目的目录，就在vscode中打开了vue001项目了。

4.1 vue项目的结构

build/ webpack.base.conf.js 文件，是webpack打包的主要配置文件，也是vue项目渲染过程的入口文件。

config/ index.js文件配置了开发环境下npm run dev运行的端口8080，可以修改为其他端口；这个文件也可以修改proxyTable 配置后端接口的代理。

dist 目录是vue项目打包产出物的路径。

node_modules目录下是依赖包，不需要太关注。

src 目录是源码目录，我们的开发工作大部分都是对这个目录下的文件进行修改。其中components 子目录和router 子目录是vue项目的两个核心。

4.2 创建页面

创建一个页面包括：新建路由、新建vue页面

打开 src\router\index.js 文件进行路由编辑：

import Vue from 'vue'
import Router from 'vue-router'
import Hi from '@/components/Hi'  // 这是新加的一行，引入Hi Component, @表示本地文件系统中的源代码目录src

Vue.use(Router)

export default new Router({
  mode: 'history',  // 这行的作用是去掉地址栏中的#
  routes: [
    {
      path: '/',
      name: 'Hi',     // 这是名称
      component: Hi   // 这是对应component下的Hi.vue文件
    }
  ]
})

注意：上面的 mode: 'history' 是去掉地址栏中的#（见上图）。但是在项目的正式部署环境下刷新浏览器会报404的错误，解决此问题需要在 nginx 中添加如下的配置（React项目也需要做同样的配置）：

location / {
    try_files $uri $uri/ /index.html; 
}

在 src\components 目录下新建Hi.vue 文件，内容为：

<template>
  <div class='hi'>
    {{message}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'hi, 我的第一个vue程序'
    }
  }
}
</script>

<style>
.hi{
  color: blue;
  font-size: 20px;
}
</style>

修改 src\ App.vue 文件，注释掉css中的margin-top

<template>
  <div id="app">
    <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>

重新访问 http://localhost:8080/ 得到如下效果：

本文内容到此结束，更多内容可关注公众号和个人微信号：

vue学习之一 vscode开发第一个vue项目