从无搭建一个配置齐全的Vue项目

主要内容

• 环境配置
• 详细搭建Vue项目

环境配置

• 安装node
  Node.js是一个javascript运行环境，给前端带来了革命性的改变，真正实现了前后端的分离开发。大家注意最新的Vue-cli安装需要的node版本>=8.9。立即安装
• 安装npm
  npm在安装node就会安装，它是node的包管理工具，查看node，npm版本请输入：node -v npm -v
• 安装nvm
  nvm是node版本管理工具，可以让你在同一台机器上安装和切换不同版本的node的工具
  - 安装nvm npm i nvm
  - 查看nvm版本npm --version
  - 查看本地安装的版本列表 nvm ls
  - 安装指定版本 nvm install [version]
  - 版本切换 nvm use [version]
• 安装cli
  • 安装
    • 使用npm安装（速度比较慢）npm install -g @vue/cli
    • 使用cnpm 安装（淘宝镜像）
      • 安装cnpm npm install cnpm -g --registry=https://registry.npm.taobao.org
      • 查看cnpm版本 cnpm -v
      • 安装cli cnpm install -g @vue/cli
    • 使用yarn安装（javaScript包管理）
      • 安装yarn npm install -g yarn
      • 查看yarn版本 yarn --version
      • 安装cli yarn global add @vue/cli
  • 查看cli版本 vue --version

搭建Vue项目

• 构建my-vue项目vue create my-vue
• 构建方式
  • 实例：
  • default：默认配置只有babel和eslint其他的都要自己另外再配置
  • Manually select features：手动配置（我们选择这个）
• 配置选择（按space空格选中，A键全选）
  • 实例：
  • TypeScript：支持使用 TypeScript 书写源码
  • Progressive Web App (PWA) Support：PWA支持
  • Router：支持 vue-router
  • Vuex：支持 vuex
  • CSS Pre-processors：支持 CSS 预处理器
  • Linter / Formatter：支持代码风格检查和格式化
  • Unit Testing：支持单元测试
• 使用Class风格装饰器（Y）
  • 实例：
• 使用Babel与TypeScript一起用于自动检测的填充(Y)
  • 实例：
• 路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面(Y)
  • 实例：
• 选择css预编译器（Less）
  • 实例：
• typescript格式验证工具（ESLint + Prettier）
  -实例：
  • 配置
    • ESLint + Airbnb config：不严谨模式
    • ESLint + Standard config ：正常模式
    • ESLint + Prettier：严格模式
    • TSLint (deprecated) ：弃用
  • 代码检查方式（Lint on save）
    • Lint on save：保存时检查
    • Lint and fix on commit： 提交git时检查
• 测试工具（Jest）
  • 实例：
• 选择e2e测试（Cypress）
  • 实例：
• 配置文件存放位置（In dedicated config files）
  • 实例：
  • 配置：
    • In dedicated config files （独立放置，更清楚）
    • In package.json（放置package.json）
• 是否保存配置（n）
• 是否使用yarn（y）
  项目配置完成，进入项目目录通过 yarn serve就可以启动项目，我们来看看项目目录结构
  

新建一个组件

// banner.vue
<template>
  <div class="banner">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Swipe, SwipeItem, Lazyload } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);
@Component({})
export default class Banner extends Vue {
  private images: Array<string> = [
    "https://img.yzcdn.cn/vant/apple-1.jpg",
    "https://img.yzcdn.cn/vant/apple-2.jpg"
  ];
}
</script>

<style scoped lang="less">
.banner {
  height: 200px;
  .van-swipe {
    height: 100%;
    img {
      height: 100%;
      object-fit: contain;
    }
  }
}
</style>
// home.vue
<template>
  <div class="home">
    <Banner />
  </div>
</template>
<script>
import Banner from "@/components/banner.vue";

export default {
  name: "Home",
  components: {
    Banner
  }
};
</script>

• 效果：
  
  好了，Vue项目底层基本构件完成，一些tsLint可以参考tslint配置。大家玩得愉快～