VUE起步构建简单单页应用

布满荆棘的人生 2022-09-30 13:56 247阅读 0赞

环境搭建工作：

1.先安装node，git工具（便于命令行操作）

2.换源（npm淘宝镜像网站:https://npm.taobao.org/）  
  命令：npm install -g cnpm --registry=https://registry.npm.taobao.org  
3.安装VUE（命令：cnpm  install -g vue-cli）  
4.安装WebPack（命令：cnpm install webpack -g ）

5.通过vue cli脚手架初始化一个自己的vue项目（命令：vue init webpack projectName）

6.cd projectName(执行cnpm install)  
7.cnpm run dev(会自动打开浏览器看到Hello界面)

8.VUE编写完成的项目使用webpack打包(命令：cnpm run build),文件生成在dist文件夹下面

打包完之后生成的文件,使用默认的vue cli打包的是单页的项目（只有一个入口文件），随便丢在服务器下面都可以进行访问（eg：nginx，apache，tomcat：localhost/index.html）

![Center][]

我们进行简单的扩展一下这个项目，项目的目录图：

![Center 1][]

在components文件夹下面新增2个模块First.vue

<template>
      <div >
        
        <h1>first.vue</h1>
      </div>
    </template>

Two.vue

定义路由文件(在router文件夹下面)：

router.js

import Vue from 'vue'
    import Router from 'vue-router'
    import Hello from 'components/Hello'
    import First from 'components/First'
    import Two from 'components/Two'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          component: Hello
        },
        {
          path: '/first',
          component: First
        },
        {
          path: '/two',
          component: Two
        }
      ]
    })

App.vue

<template>
      <div id="app">
        <img src="./assets/logo.png">
           <div class="list-group">
     
            <router-link to="/">首页</router-link> 
            <router-link to="/first">first</router-link>
            <router-link to="/two">two</router-link>
    
          </div>
        <router-view></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>

然后执行命令:cnpm run dev

![Center 2][]![Center 3][]

注意浏览器里面的路由http://localhost:8080/\#/first,http://localhost:8080/\#/two，只要你看到的网站路由类似这样的基本上都是目前流行的前端JS框架写出来的。

注：这种流行的前端框架写代码必须在nodejs环境下面去写，否则写的代码无法压缩，webpack无法起作用，因为webpack依赖与npm，作为一位合格的前端开发者nodejs必须会吧，不会的话赶紧去学吧。

[Center]: /images/20220705/6c346fe37e094d659269d6acb9b39e49.png
[Center 1]: /images/20220705/5db07f1e3ef14c09845b0801c103a468.png
[Center 2]: https://img-blog.csdn.net/20170322212325557?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FveHVhaWd1b3lp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: /images/20220705/8b1728e2a6a94a61a8e063823bed98b2.png