使用vue构建企业级应用步骤

2019-12-16 17:00:05 浏览数 (1)

创建项目

代码语言：javascript复制
npm install -g vue-cli
vue init webpack-simple demo
cd demo
npm install
npm run dev

热身

实验 在main.js中使用h函数挂载

代码语言：javascript复制
import Vue from 'vue'

new Vue({
  el: '#app',
  render: h => h('ul', {
    'class': 'movies'
  }, [
    h('li', {
      'class': 'movie'
    }, 'Star Wars'),
    h('li', {
      'class': 'movie'
    }, 'Blade Runner'),
  ])
})

安装Babel Vue预设

代码语言：javascript复制
npm i -D babel-preset-vue
npm i -D babel-polyfill

安装babel-polyfill

在main.js中导入babel-polyfill 以便旧版浏览器中可以使用新的js特性

代码语言：javascript复制
import 'babel-polyfill'

实验 ：用对象展开运算符的方式挂载根组件

在src目录下创建Test.vue

代码语言：javascript复制
<template>
  <div>
    <p>{{message}}</p>
    <input
      type="text"
      v-model="message"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "Hello Word"
    };
  }
};
</script>
<style>
p {
  color: grey;
}
</style>

在main.js上挂载

代码语言：javascript复制
import Vue from 'vue'
import 'babel-polyfill'
import Test from './Test.vue'
new Vue({
  el: '#app',
  ...Test
})

实验 使用Pug

代码语言：javascript复制
npm install --save-dev pug pug-loader

写一个Pug.vue

代码语言：javascript复制
<template lang="pug">
ul.movies
  li.movie Star Wars
  li.move Blade Runner
</template>

挂载后的效果和第一个例子一样

选择less作为css预处理器

代码语言：javascript复制
npm install --save-dev less less-loader

使用例子

代码语言：javascript复制
<template>
  <article class="article">
    <h3 class="title">Title</h3>
  </article>
</template>
<style lang="less" scoped>
.article {
  .title {
    color: red;
  }
}
</style>

实验 做一个父子组件组合

创建Movie.vue

代码语言：javascript复制
<template>
  <li class="movie">
    {{movie.title}}
  </li>
</template>
<script>
export default {
  props: ["movie"]
};
</script>
<style lang="less" scoped>
.movie:not(:last-child) {
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: soild 1px rgba(0, 0, 0, 0.1);
}
</style>

创建Movies.vue

代码语言：javascript复制
<template>
  <ul class="movies">
    <Movie
      v-for="movie of movies"
      :key="movie.id"
      :movie="movie"
    >

    </Movie>
  </ul>
</template>
<script>
import Movie from "./Movie";
export default {
  components: {
    Movie
  },
  data() {
    return {
      movies: [
        { id: 0, title: "Star Wars" },
        {
          id: 1,
          title: "Blade Runner"
        }
      ]
    };
  }
};
</script>

使用路由搭建基础的应用骨架

我们打算用vue-router 先创建一个只有两个页面（首页和常见问题）的简单应用

安装vue-router

代码语言：javascript复制
npm install --save vue-router

创建路由对象

在src目录下创建router.js文件

代码语言：javascript复制
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import FAQ from './components/FAQ.vue'
Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/faq',
    name: 'faq',
    component: FAQ
  },
]

const router = new VueRouter({
  routes,
  mode: 'hash'
})

export default router

在src目录下创建components目录 ，在components目录下创建 Home.vue 及 FAQ.vue

代码语言：javascript复制
<template>
  <main class="home">
    <h1>首页</h1>
  </main>
</template>
代码语言：javascript复制
<template>
  <main class="faq">
    <h1>常见问题</h1>
  </main>
</template>

在components目录下创建布局组件AppLayout.vue

代码语言：javascript复制
<template>
  <div class="app-layout">
    <header class="header">
      <div><img
          src="../assets/logo.png"
          class="img"
        >

      </div>
      <div>My shirt shop</div>
    </header>

    <router-view />
  </div>
</template>
<style lang="less">
@import "../style/main";
</style>

<style lang="less" scoped>
.header {
  .img {
    width: 64px;
    height: 64px;
  }
}
</style>

其中你可以在src/style下先建立一个空的main.less文件

挂载路由及布局组件

src/main.js

代码语言：javascript复制
import Vue from 'vue'
import 'babel-polyfill'
import AppLayout from './components/AppLayout.vue'
import router from './router'
new Vue({
  el: '#app',
  render: h => h(AppLayout),
  router
})
javascript babel.js vue.js

0 人点赞