Vue2脚手架快速搭建

基于Vue.js和vue-router创建一个VUE2脚手架,我们可以分以下几个部分:

  1. 项目初始化 首先确保你已经安装了Node.js。通过npm或yarn安装Vue CLI来创建一个新的Vue项目:

    npm install -g @vue/cli
    vue create myEnterpriseWebApp
    cd MyEnterpriseWebApp
    
  2. 安装vue-router 添加vue-router到项目中:

    vue add router
    
  3. 创建页面组件src/components目录下创建以下组件(以首页和关于我们为例):

    • HomePage.vue: 主页组件,包含欢迎语、标语等基本内容。
    • AboutUsPage.vue: 关于我们页面组件,展示企业的历史、团队信息以及企业愿景等。
  4. 配置路由src/router/index.js中配置Vue Router:

    import Vue from 'vue'
    import Router from 'vue-router'
    import HomePage from '@/components/HomePage'
    import AboutUsPage from '@/components/AboutUsPage'
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history', // 使用HTML5历史记录模式,去除URL中的#
      routes: [
        { path: '/', component: HomePage },
        { path: '/about-us', component: AboutUsPage }
      ]
    })
    
  5. 主入口文件 修改 src/main.js,引入并使用router:

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')
    
  6. 修改App组件 创建 src/App.vue,并在其中使用router-view来渲染当前路由对应的组件:

    <template>
      <div id="app">
        <header>
          <!-- 可以添加导航栏 -->
          <nav>
            <router-link to="/">首页</router-link> |
            <router-link to="/about-us">关于我们</router-link>
          </nav>
        </header>
        <main>
          <router-view></router-view>
        </main>
      </div>
    </template>
    
  7. 添加样式 可以在 src/assets/css/main.css中添加一些基本样式。例如,定义一个导航栏的基本样式:

    /* src/assets/css/main.css */
    nav {
      background-color: #333;
      color: white;
      padding: 10px 0;
      text-align: center;
    }
    
    router-link {
      color: white;
      margin-right: 20px;
      text-decoration: none;
    }
    
  8. 运行项目 在终端中启动开发服务器:

    npm run serve
    
  9. 部署到生产环境 使用Vue CLI的命令将项目构建为生产版本并部署到服务器上。

现在,你已经成功创建了一个基本的VUE脚手架,使用了Vue和vue-router进行页面导航。你可以根据实际需求进一步扩展路由配置、组件内容以及样式设计。