• vue-cli3初始化项目


    1
    npm install -g @vue/cli

    创建配置

    创建

    1
    vue create vue-app

    选择配置

    1
    2
    3
    4
    ? Please pick a preset: (Use arrow keys)
    1 (babel, eslint)
    default (babel, eslint)
    Manually select features
    • 保存过的配置
    • 默认配置
    • 自定义配置

    自定义配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ? Check the features needed for your project:
    (*) Babel
    (*) TypeScript
    ( ) Progressive Web App (PWA) Support
    (*) Router
    ( ) Vuex
    (*) CSS Pre-processors
    (*) Linter / Formatter
    (*) Unit Testing
    ( ) E2E Testing

    可以直接按数字键1,2,3,4进行选择

    • Babel:将ES6编译成ES5
    • TypeScript:JS超集,主要是类型检查
    • Router和Vuex,路由和状态管理
    • Linter/ Formatter:代码检查工具
    • CSS Pre-processors:css预编译 (稍后会对这里进行配置)
    • Unit Testing:单元测试,开发过程中前端对代码进行自运行测试
    1
    Use class-style component syntax? (Y/n) y

    是否使用Class风格装饰器?
    即原本是:home = new Vue()创建vue实例
    使用装饰器后:class home extends Vue{}

    大专栏  vue-cli3初始化项目ass="gutter">
    1
    Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) y

    使用Babel与TypeScript一起用于自动检测的填充? yes

    1
    Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

    路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

    1
    2
    3
    4
    5
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
    Sass/SCSS (with dart-sass)
    Sass/SCSS (with node-sass)
    Less
    Stylus

    使用什么css预编译器? 看个人习惯

    1
    2
    3
    4
    5
    6
    ? Pick a linter / formatter config: (Use arrow keys)
    TSLint
    ESLint with error prevention only
    ESLint + Airbnb config
    ESLint + Standard config
    ESLint + Prettier

    tslint: typescript格式验证工具
    eslint w…: 只进行报错提醒;
    eslint + A…: 不严谨模式;
    eslint + S…: 正常模式;
    eslint + P…: 严格模式;

    建议选择正常模式

    1
    2
    3
    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    (*) Lint on save
    ( ) Lint and fix on commit

    代码检查方式

    • 保存时检查
    • 提交时检查并修复

    启动打包配置

    可以在项目最外层新建vue.confi.js来配置端口,代理等配置,具体可以参照官方文档

  • 相关阅读:
    并发包学习(二)-容器学习记录
    初尝微信小程序开发与实践
    记一次全站升级https引发的一系列问题
    Hadoop集群搭建
    es5 的类和继承
    TypeScript 类和继承
    TypeScript 函数
    TypeScript 变量 和 数据类型
    js变量提升与函数提升
    vue 路由监听
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12370743.html
一二三 - 开发者的网上家园