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

偏执的太偏执、 2022-01-21 09:55 613阅读 0赞

vue前端框架使用越来越多，而vscode作为前端开发IDE环境也使用越来越普遍，本文结合vscode介绍vue开发第一个vue项目。

开发vue需要依赖于nodejs，本博客有介绍nodejs的安装，本文就不再做介绍。

# 一、安装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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70][]

# 三、安装vscode #

vscode现在几乎是开放vue的标配IDE开发环境，是微软贡献的免费试用的开源IDE，下载地址 [https://code.visualstudio.com/][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/][http_localhost_8080] 得到如下效果：

![20190609185344225.png][]

本文内容到此结束，更多内容可关注公众号：

![20190810225416821.jpg][]

[http_localhost_8080]: http://localhost:8080/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70]: /images/20220121/d5ae801a39a1481ca1b769b4d207af8b.png
[https_code.visualstudio.com]: https://code.visualstudio.com/
[20190609185344225.png]: /images/20220121/6fea89182b744c189129a2d8ff1ed4f9.png
[20190810225416821.jpg]: https://img-blog.csdnimg.cn/20190810225416821.jpg